Question

jquery动画循环

$(function(){
$("#sun")
.animate({top:"-=20px"},2247)
.animate({top:"+=20px"},2247)
.animate({left:"-=20px"},2247)
.animate({left:"+=20px"},2247)
;})
打开页面只运行一次怎么让他循环运行?

Answer 1

可以建个时间器,每2秒运行：
$(document).ready(function(){
setTimeout(function () { abc(); }, 2000)
});
function abc()
{
.animate({top:"-=20px"},2247)
.animate({top:"+=20px"},2247)
.animate({left:"-=20px"},2247)
.animate({left:"+=20px"},2247)
}

追问

是不是写错了呢?

追答

请问哪错了

追问

延时2秒后运行.但是运行后没有继续再循环.

追答

那你把abc里的方法改成function abc()
{
alert(1);
}
看看能不能每2秒弹出，若有则方法没错是你的代码错

追问

只会弹出一次.

追答

那就是我的错了，我来改改

追问

= . = 好了加分.. 你测试好嗯, 我现在回复一次10分..

追答

刚才一时急，忘记把setTimeout改成setInterval，前者是指定延时运行某个方法，后某指定多久重复运行方法
$(document).ready(function () {
setInterval("ab()", 2000);
});
function ab() {
alert(1);
}

Answer 2

演示:http://help.kansea.com/jquery/zhidao/282037532.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function move(a) {
$(".dotA")
.animate({
top:a.offset_topA//弹跳像素
},
o.speed,//动画速度
o.fx//动画完成后执行函数
);
}
o = {};

o.spead = 500;//速度
o.move = 0;//初始化动作

o.fx = function(){
if(o.move==0){//判断动作
o.move = 1;//改变动作
a = {
offset_topA:"100px"//移动像素
};
}else{
o.move = 0;
a = {
offset_topA:"0px"
};
}
move(a);//执行
}
$(document).ready(function() {
o.fx();//调用
});
</script>
<style>
.dotA,.dotB{
float:left;
display:block;
position:absolute;
width:50px;
height:50px;
background:red;
}
</style>
<div class='dotA'>s</div>

追问

请不要复制.

追答

那你要什么？？难道上面的代码看不懂？
定义一个o对象 o ={}
将你要执行的动作封装到一个move方法中，在move方法执行o对象的fx方法。
fx是o对象中的一个方法。
这个方法是起判断和设置作用的。判断位置和设置位置。fx方法执行了move方法。
然后在页面初始化中调用o对象的fx方法。

简单的说move方法执行完你要执行的动画效果后调用一下fx方法做一下判断和设置。
fx做完判断和设置后再调用move，这样就形成了循环。

这回解释的够清楚了吧？

追问

呃..初学者呃.. 代码呃? 写好加分

追答

呃，我也想做伸手党，呃，要那分有屁用。
道理都说的这么明白还不愿意去实现，哎，自己玩吧。