JQuery анимация завершена по всем направлениям

Question

Я столкнулся с проблемой, связанной с анимацией jquery.У меня есть возможность пользователю нажимать на кнопку, и, основываясь на том направлении кнопки, по которому он щелкает, все элементы list (li) перемещаются в противоположном направлении.Проблема заключается в том, что я установил обтекание внутри div, поэтому, когда элемент списка заканчивается на одной стороне, анимация сползает с div-вида, но атрибут css style устанавливается на противоположную сторону от экрана.поэтому он может быть готов к прокрутке вниз для следующего нажатия кнопки.Но когда пользователь нажимает кнопку несколько раз, он ставит в очередь все элементы друг над другом, потому что анимация еще не закончена.Затем я прикрепил анимацию stop () к элементам, но потом возникла вторая проблема: когда пользователь нажимает кнопку несколько раз, она быстро, элементы никогда не обернутся, они просто останутсяисчезали до тех пор, пока вы не нажмете кнопку медленно или если вы начнете нажимать кнопку быстрее после того, как некоторые из них исчезнут, а затем начните сначала медленно, тогда только те, которые были видны при замедлении, все еще переносятся в div до следующего перехода:

быстрый пример:

function Rotate(){
    $("li.headline").each(function(){
      var left= $(this).css("left");
      left=left-100;
      if(left>99){
         $(this).stop().animation({left:left}, 'slow', function(){
         $(this).css("left",left);});
      }else{
         $(this).stop().animation({left:left}, 'slow', function(){
         $(this).css("left",max);}); //max is the max "left" calculated from all list items
      }
    });
 }
$("button.next").click(function(){
Rotate();
});

Может ли кто-нибудь мне помочь

Пример HTML / CSS

#scroll{
position:relative;
overflow:hidden;
width:300px
}
.headline{
position:absolute;
float:left
}

  <div id="scroll">
    <ul>
      <li  class="headline"><a>First</a>
      <li  class="headline"><a>Second</a>
      <li  class="headline"><a>Third</a>
      <li  class="headline"><a>Fourth</a>
      <li  class="headline"><a>Fifth</a>
    </ul>
  <div>

Answer 1

Я исправил проблему, добавив дополнительную проверку в условие , если , так что

var index;//this is the current li at the head that is incremented by the button click 
//and updated outside this function
$("li.headline").each(function(i){ //added i to get the current index the each is on
if(left>99&&index==i){ 
     $(this).stop(true, false).animation({left:left}, 'slow', function(){ //also made the first true
      //and second false, so the animation wouldn't rush across the screen but true so it wouldn't
      // build up the queue
     $(this).css("left",left);}); 
  }else{ 
     $(this).stop(true, false).animation({left:left}, 'slow', function(){ 
     $(this).css("left",max);}); //max is the max "left" calculated from all list items 
  } 

Answer 2

Вы пробовали это?

$(this).stop(true, true) // remainder of your code

Очистит очередь анимации для соответствующего элемента и завершит анимацию. По умолчанию для обоих параметров установлено значение false, что означает, что все анимации в очереди все еще выполняются (останавливается только текущая анимация) и текущая анимация не завершена.

http://api.jquery.com/stop/