javascript - jquery onclick 从 div 到 div

Question

我在这里遇到了这个问题javascript - Need onclick to go full distance before click works again我似乎无法弄清楚如何让它发挥作用。因此，我将继续计划 B，即尝试在滚动中从一个 div 转到另一个 div。目前，我的 HTML 看起来像这样:

HTML

<div class="outerwrapper">
    <div class="innerwrapper">
        <div class="holder"></div>
        <div class="holder"></div>
        <div class="holder"></div>
        <div class="holder"></div>
        <div class="holder"></div>
        <div class="holder"></div>
    </div>
</div>
<div class="buttons">
    <div id="left">
    <div id="right">
</div>

Javascript

$(function () {  // DOM READY shorthand

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

});

所以目前我试图让它在另一个点击事件触发之前先移动完整的 251px。问题是当用户多次点击箭头时，它会重置事件并从滚动中重新开始，而不是逐帧移动，它可以从帧的中间开始并在帧的中间结束.由于我无法弄清楚如何让 javascript 首先完成其操作，以便在事件再次发生之前它达到完整的 261 px，我想知道是否有一种方法可以从 div 转换到 div，以便用户可以他们想点击多少次，它就会从一个 div 平滑地过渡到另一个 div，而不是在完成后在中间结束？

Answer 1

这就是 on() 和 off() 的作用:

$(function () {
    var buttons = $("#right, #left");
    buttons.on('click', ani);

    function ani()
        buttons.off('click');

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

另一种选择是不依赖于当前滚动的位置，而是您自己跟踪的变量。

$(function () {
    $("#right, #left").on('click', function() {
        var wrap = $(".outerwrapper"),
            dir  = this.id == "right" ? 251 : -251,
            Left = (wrap.data('scroller') || 0)  + (dir);

        $(".outerwrapper").animate({ scrollLeft: Left }, 1000);
        wrap.data('scroller', Left);
    });
});