jquery动画全面完成答案

【问题标题】：jquery animation is complete across the boardjquery动画全面完成
【发布时间】：2010-11-09 03:36:42
【问题描述】：

我遇到了 jquery 动画带来的问题。我让用户能够单击一个按钮，并根据他们单击的按钮方向将所有 list(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>

【问题讨论】：

您能否也发布一个 HTML 示例？指向 jsFiddle.net 示例的链接对于重现您所看到的行为非常有帮助。
仍然无法复制问题。你能检查你的CSS吗？我认为您的意思不是两种#scroll 样式。我已将您的代码粘贴在这里，jsfiddle.net/4gR8S，但无法复制问题。请更新并与repro分享更新的链接。
你说得对，我没有通过在“if”条件中添加检查来解决问题。将发布答案

标签： javascript jquery animation

【解决方案1】：

你试过了吗？

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

它将清除匹配元素的动画队列并完成动画。两者的默认值都是 false，这意味着任何排队的动画仍在运行（仅停止当前动画）并且当前动画未完成。

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

【讨论】：

实际上是通过添加 stop(true, true) 来代替，如果按钮按下过快，它会使

【解决方案2】：

我通过在 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 
  }

【讨论】：