4

我有这个javascript函数，当点击一定距离时我会使用它。这在使用大约 7 个 div 的从左到右的滚动条中使用。我的问题是如何在再次使用点击之前让点击先走完整的距离？问题是如果用户快速点击箭头按钮，它会重置距离，有时可能会出现在图像中间而不是接缝处。我缺少什么代码来完成这个？

$(function () {  

    $("#right, #left").click(function () {
        var dir = this.id == "right" ? '+=' : '-=';
        $(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000);
    });

});
4

6 回答 6

4

我认为最简单的方法是使用一个布尔标志来指示动画是否正在发生：

$(function () {

    var animating = false,
        outerwrap = $(".outerwrapper");

    $("#right, #left").click(function () {
        if (animating) {return;}
        var dir = (this.id === "right") ? '+=' : '-=';
        animating = true;
        outerwrap.animate({
            scrollLeft: dir + '251'
        }, 1000, function () {
            animating = false;
        });
    });

});

为我工作：http: //jsfiddle.net/BYossarian/vDtwy/4/

于 2013-09-23T18:28:33.857 回答
3

使用 .off() 在单击发生后立即取消绑定，然后在动画完成后重新绑定。

function go(elem){
    $(elem).off('click'); console.log(elem);
    var dir = elem.id == "right" ? '+=' : '-=';
    $(".outerwrapper").stop().animate({ left: dir + '251' }, 3000, function(){
        $("#right, #left").click(go);
    });
}
$("#right, #left").click(function () {
    go(this);
});

jsFiddle 示例

在这个简化的例子中可以看到，点击事件在点击后立即解除绑定，然后在动画完成后反弹。

于 2013-09-19T14:12:37.477 回答
2

使用这样的自动then呼叫

var isMoving = false;
$(function () {  

  $("#right, #left").click(function () {
    if (isMoving) return;
    isMoving = true;

    var dir = this.id == "right" ? '+=' : '-=';
    $(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000).then(function(){isMoving = false}());
  });

});
于 2013-09-19T14:08:30.520 回答
2

我认为您错过了这样一个事实，即当您制作 stop() 时，您实际上将滑块定位在某个特定点。即，如果您的滚动条是 1000 像素，并且您非常快速地单击左两次，您可能会得到

scrollLeft: 0 - 251
scrollLeft: -2 - 251

因此，我认为您应该使用索引，而不是完全使用这些 += 和 -= 计算。例如：

$(function () {  

    var numberOfDivs = 7;
    var divWidth = 251;
    var currentIndex = 0;
    $("#right, #left").click(function () {
        currentIndex = this.id == "right" ? currentIndex+1 : currentIndex-1;
        currentIndex = currentIndex < 0 ? 0 : currentIndex;
        currentIndex = currentIndex > numberOfDivs ? numberOfDivs : currentIndex;
        $(".outerwrapper").stop().animate({ scrollLeft: (currentIndex * divWidth) + "px" }, 1000);
    });

});

这种方法的一大好处是您不会禁用点击。您可以根据需要多次单击，并且可以快速完成。该脚本仍然有效。

于 2013-09-19T14:10:49.980 回答
1

这将工作得很好：

var userDisplaysPageCounter = 1;
    $('#inventory_userdisplays_forward_button').bind('click.rightarrowiventory', function(event) {
        _goForwardInInventory();
    }); 
    $('#inventory_userdisplays_back_button').bind('click.leftarrowiventory', function(event) {
        _goBackInInventory();
    });



function _goForwardInInventory()
{
    //$('#inventory_userdisplays_forward_button').unbind('click.rightarrowiventory');
    var totalPages = $('#userfooterdisplays_list_pagination_container div').length;
    totalPages = Math.ceil(totalPages/4);
//  alert(totalPages);
    if(userDisplaysPageCounter < totalPages)
    {
        userDisplaysPageCounter++;
        $( "#userfooterdisplays_list_pagination_container" ).animate({
            left: "-=600",
            }, 500, function() {

        });
    }

}

function _goBackInInventory()
{
    //$('#inventory_userdisplays_back_button').unbind('click.leftarrowiventory');
    if(userDisplaysPageCounter > 1)
    {
        userDisplaysPageCounter--;
        $( "#userfooterdisplays_list_pagination_container" ).animate({
            left: "+=600",
            }, 500, function() {

        });
    }

}
于 2013-09-19T14:07:06.557 回答
1

我支持 BYossarian 的回答。

这是他演示的一个变体，当用户快速单击按钮几次时“跳过”动画：

$(function () {

    var targetScroll = 0,
        outerwrap = $(".outerwrapper");

    $("#right, #left").click(function () {
        // stop the animation,
        outerwrap.stop();
        // hard set scrollLeft to its target position
        outerwrap.scrollLeft(targetScroll*251);

        if (this.id === "right"){
            if (targetScroll < 6) targetScroll += 1;
            dir = '+=251';
        } else {
            if (targetScroll > 0) targetScroll -=1;
            dir = '-=251';
        }
        outerwrap.animate({ scrollLeft: dir }, 1000);
    });

});

小提琴

于 2013-09-27T10:04:19.340 回答