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

您可以在click事件中声明一个函数，该函数回调自身以处理动画的循环。

$('#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);
});

提供css的jsfiddle示例。

Answer 2

执行此操作的一种方法是将行为绑定到自定义事件，然后在递减计数器时以递归方式触发该事件：

$('#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/

Answer 3

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

$(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方法......

Jquery动画n次？

3 个答案: