javascript - html 元素无法使用 jQuery 正确移动

Question

我必须修复 http://rhemapress.pl/www_wopr/ 上的底部 slider 。如果您看到单击向右箭头两次，则动画会返回到开始并再次制作动画。在这里，当我单击右箭头时，这应该被阻止并且不可能第二次单击。

向右移动的次数由 checkWidth() 动态创建；

    function checkWidth() {

        var elements = $('.items').children().length;

        var width = Math.ceil(elements / 5) * 820;

        return width;
    }

这个返回的 realWidth 女巫类似于偏移量限制。变量偏移量在开始时设置为 0。因此，如果我单击右侧，则在方法 moveRight() 中检查元素是否可以移动并且它已移动。结束时偏移量增加 820px( slider 的一页)，因此如果我们有 2 页，则无法调用下一步。但这就是问题! :/

我的代码

<script type="text/javascript">
$(document).ready(function() {
    $('a.prev').bind('click',moveLeft);
    $('a.next').bind('click',moveRight);


    var realWidth = checkWidth(); 
    realWidth -= 820;

    var offset = 0;


    function moveLeft(e) {

        var position = $('.items').position();
        var elements = $('.items').children().length;

        if ((elements > 5) && ((offset - 820) >= 0) ) {
            $('.items').animate({
            'left': (position.left + 820)
            }, 300, function() {
                offset -= 820;
            });

        }
    }

    function moveRight(e) {

        var position = $('.items').position();
        var elements = $('.items').children().length;

        if ((elements > 5) && ((offset + 820) <= realWidth)) {        

            $('.items').animate({
            'left': (position.left - 820)
            }, 300, function() {
                offset += 820;
            });
        }
    }

    function checkWidth() {

        var elements = $('.items').children().length;

        var width = Math.ceil(elements / 5) * 820;

        return width;
    }
});
</script>

我怎样才能正确地做到这一点？

Answer 1

您似乎想阻止在当前动画完成之前触发单击事件。如果元素当前正在动画化，您可以通过阻止函数的其余部分执行来实现此目的:

function moveLeft(e) {
   if ($(this).is(":animated")) {
      return false;
   }