jquery动画n次？

Question

我有一个滑块，点击后，垂直动画一个div，然后返回到与启动时相同的位置。

http://www.eirestudio.net/hosting-files/markup/

我的问题是;我怎么能让这个滑块滑动n次，让我们说10而不是一次？

的JavaScript

$('#featured li.block div').click(function() 
{ 
    $(this).animate 
    ({ 
     top: "-=200" 
    }, 300, function() 
    { 
     $(this).css('top', '220px').animate 
     ({ 
      top: "-=220" 
     }, 300); 
    }); 
}); 

HTML

<div id="featured"> 
    <div class="wrapper"> 
     <ul> 
      <li class="block"> 
       <div>aaa</div> 
      </li> 
      <li class="block"> 
       aaa 
      </li> 
      <li class="block"> 
       aaa 
      </li> 
      <li class="block"> 
       aaa 
      </li> 
      <li class="block"> 
       aaa 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

你可以声明回调需要自己来处理动画的循环点击事件里面的函数。

$('#featured li.block div').click(function() { 
    var f = function($this, count) { 
     $this.animate({ 
      top: "-=200" 
     }, 300, function() { 
      $this.css('top', '220px').animate({ 
       top: "-=220" 
      }, 300, function() { 
       if (count > 0) { 
        count = count - 1; 
        f($this, count); 
       } 
      }); 
     }); 
    }; 
    f($(this), 10); 
}); 

在jsfiddle上的示例与提供的CSS。

Answer 2

最简单的方法是使用queue: true连续连续调用.animate调用，这将在前面的动画完成后为每个动画调整动画。例如：

$(this).animate({ top: "-=200"" }, { queue: true, duration: 3000 }) 
    .animate({ top: "-=200"" }, { queue: true, duration: 3000 }) 
    .animate({ top: "-=200"" }, { queue: true, duration: 3000 }); 
// And so on. 

一个更优雅的解决办法是创建自己的$ .fn方法...

Answer 3

的一种方式做，这是由行为绑定到一个自定义事件，则触发该事件递归你递减计数器：

$('#featured li.block div').click(function() { 
    var times = 10; 
    $(this).bind('roll', function(){ // bind custom event 
    $(this).animate({ 
     top: "-=200" 
    }, 300, function() { 
     $(this).css('top', '220px').animate({ 
     top: "-=220" 
     }, 300, function() { // add callback function here 
     if (--times) { 
      $(this).trigger('roll'); // trigger custom event 
     } 
     }); 
    }); 
    }).trigger('roll'); // first trigger to start the process 
}); 

例子：http://jsfiddle.net/redler/Nnt3j/