html元素无法正确移动jQuery

Question

我必须修复底部滑块http://rhemapress.pl/www_wopr/。如果你看到当你点击右箭头两次，然后动画回来开始和再次动画。在这里，当我点击一个右箭头时间这应该被阻止，并不可能再次点击。

右移的数字是由checkWidth（）动态创建的;

function checkWidth() { 

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

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

     return width; 
    } 

这个返回realWidth女巫是类似于偏移限制。变量偏移量在开始时设置为0。所以，如果我点击右键，然后在方法moveRight（）被检查，如果元素可以被移动，它的移动。在结束偏移量增加820px（一页滑块），所以如果我们有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; 
    }