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>

Javscript

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

从div到div的jquery onclick

1 个答案: