jQuery onclick从div到div

Question

我在这里遇到了javascript这个问题-需要onclick才能全开，然后Click才能再次起作用 ，我似乎无法弄清楚如何使其起作用。 所以我要继续计划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>

Javscript

$(function () {  // DOM READY shorthand

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

});

因此，目前我正试图让它先移动整个251像素，然后再触发另一个点击事件。 问题是，当用户多次单击箭头时，它将重置事件并从滚动内重新开始，因此与其从一帧到另一帧，它可能从帧的中间开始并在帧的中间结束。 由于我一直无法弄清楚如何使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);
    });
});