JQuery анимация останавливается в середине DIV на двойном щелчке

Question

я создал скользящий список дивы, используя следующий код:

<div class="row"> 
    <img class="back-arrow"> 
    <div class="hide-extra"> 
    <div class="tile-container"> 
       <div class="tile"></div> 
       <!-- More Divs --> 
    </div> 
    </div> 
    <img class="next-arrow"> 
</div> 

Перелив должен оставаться скрытым и DIVS слайда, чтобы показать следующую/предыдущую диву когда нажимают соответствующие стрелки. Вот упрощенная версия моего кода, чтобы двигаться вперед плитки:

function nextTile() { 
    var tileWidth = /*Width of each div*/; 
    var position = parseInt($(".tile").css("right")); 
    position += tileWidth; 
    var rightPosition = position + "px"; 
    $(".tile").animate({right:rightPosition}); //in my code each of the divs in the row move position 
} 

}

код работает отлично, за исключением того, если я нажимаю слишком быстро по стрелкам дивам не будут скользить соответствующую длину. Вместо этого они скользят пополам и оставляют меня застрявшим с полуразвитым.

Answer 1

я сделал следующее дополнение к моему коду, используя комментарий Mälk и его прилагаемую ссылку: jQuery animation detect if animating?

function nextTile() { 
    var tileWidth = /*Width of each div*/; 
    var position = parseInt($(".tile").css("right")); 
    position += tileWidth; 
    var rightPosition = position + "px"; 
    var tileLock = $(".tile").is(':animated'); // new code 
    if (tileLock === false)     // new code 
      $(".tile").animate({right:rightPosition}); 
}