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

我纠正了这个问题，在if条件中添加了一个额外的检查

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/