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);
    });
});