jquery - 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();
});

这是小提琴：http: //jsfiddle.net/jC8Js/

---

更新：如果您希望它在每个周期之前暂停，请使用计时器：

setTimeout(runIt, 1000);

这是小提琴：http: //jsfiddle.net/jC8Js/1/

---

或者，您可以使用间隔计时器运行所有这些：

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

这是小提琴：http: //jsfiddle.net/jC8Js/2/

Answer 2

http://jsfiddle.net/nUVbb/

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