jquery анимация завершена по всей доске

Question

Я столкнулся с проблемой, которая поставляется с анимацией jquery. У меня есть пользователь, который может щелкнуть по кнопке и на основе этого направления кнопки, которое они нажимают на нее, сдвигает все список (li) элементов в противоположном направлении. Проблема заключается в том, что у меня она настроена на обертку внутри div, поэтому, когда элемент списка заканчивается на одной стороне, он заставляет анимацию сместиться с экрана div, но при этом атрибут стиля css устанавливается на противоположную сторону от экрана поэтому он может быть готов прокрутить вниз для следующего нажатия кнопки. Но когда пользователь нажимает кнопку несколько раз, он разбивает все элементы друг на друга, потому что анимация еще не закончена. Итак, я привязал анимацию 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/