jquery循环动画

问题描述

我有这些脚本，我需要循环：

  $（document）.ready（function（）{
 runIt（）; 
}）
函数重置（）
 {
 $（'。grower'）。removeAttr（style）; 
} 
 
函数runIt（）
 {
 $（'。grower'）。animate（{width：30px，height：'30px'，left ：-6，顶部：-6，不透明度：0}，800，重置）; 
} 
  

但是当我添加runIt（）;它内部自我循环，它循环但我的浏览器变为空白，我不会回应。我怎么能这样做，所以它会循环该动画。

预先感谢

解决方案

div>

不需要经常查询DOM。 $（'。grower'） $（文档）.ready（函数（）{
var $ grower = $（'。grower'）;

函数runIt（）{
$ grower.animate（{
width：30px，
height：'30px'，
left：-6，
top：-6，
opacity：0
，800，function（）{
$ grower.removeAttr（style）;
runIt（）;
}）;
}

runIt（）;
}）;

这里是小提琴：

---

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

  setTimeout（runIt，1000）; 
  

这是小提琴：

---

或者，您可以运行所有这些都带有：

<$ （函数（）函数）{
$> $（$。$） {
$ grower.animate（{
width：30px，
height：'30px'，
left：-6，
top： - 6，
opacity：0
}，800，function（）{
$ grower.removeAttr（style）;
}）;
} ，1500）;
}）;

下面是小提琴：

i have these scrip that i need to loop:

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

but when i add the runIt(); inside it self so it can loop, it loops but my browser goes blank and i will not respond. how can i do it so it will loop that animation.

thanks in advance

解决方案

No need to query the DOM constantly. Store the $('.grower') in a variable:

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

Here's the fiddle: http://jsfiddle.net/jC8Js/

---

Update: If you want it to pause before each cycle, use a timer:

setTimeout(runIt, 1000);

Here's the fiddle: http://jsfiddle.net/jC8Js/1/

---

Alternatively, you could just run all of it with an 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);
});​

Here's the fiddle: http://jsfiddle.net/jC8Js/2/

这篇关于jquery循环动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！