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

你试过这个吗？

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

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

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

Answer 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 
  }

jquery动画全面完成

2 个答案: