jquery循环动画

Question

我有这些需要循环播放的脚本:

$(document).ready(function() {
    runIt();
})
function resets()
{
  $('.grower').removeAttr("style");
}

function runIt() 
    {
        $('.grower').animate({width: "30px",height: '30px', left: "-6", top: "-6", opacity:"0"}, 800, resets);
    }

但是当我添加 runIt(); 时在它自己内部，这样它就可以循环，它循环，但我的浏览器变成空白，我不会响应。我该怎么做才能循环播放该动画。

提前致谢

Answer 1

无需不断查询 DOM。将 $('.grower') 存储在变量中:

$(document).ready(function() {
    var $grower = $('.grower');

    function runIt() {
        $grower.animate({
            width: "30px",
            height: '30px',
            left: "-6",
            top: "-6",
            opacity:"0"
        }, 800, function() {
            $grower.removeAttr("style");
            runIt();
        });
    }

    runIt();
});

这是 fiddle :http://jsfiddle.net/jC8Js/

<小时/>

更新:如果您希望它在每个周期之前暂停，请使用 a timer :

setTimeout(runIt, 1000);

这是 fiddle :http://jsfiddle.net/jC8Js/1/

<小时/>

或者，您可以使用 interval timer 来运行所有内容。 :

$(document).ready(function() {
    var $grower = $('.grower');

    setInterval(function() {
        $grower.animate({
            width: "30px",
            height: '30px',
            left: "-6",
            top: "-6",
            opacity:"0"
        }, 800, function() {
            $grower.removeAttr("style");
        });
    }, 1500);
});​

这是 fiddle :http://jsfiddle.net/jC8Js/2/