1

我在这里遇到了这个问题javascript - 需要 onclick 在点击再次工作之前走完整的距离，我似乎无法弄清楚如何让它工作。所以我将继续计划 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 并且一旦完成就不会在中间结束？

4

1 回答 1

3

这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);
    });
});
于 2013-09-23T17:58:39.393 回答