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