想简单的实现一个JS动画无限循环~不过设置了定时器好像没用~~不知道咋整了~求大神帮忙看下~非常感谢~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<div style="width: 30px;height: 30px;
background-color: pink;position: absolute;"></div>
<script>
function donghua(){
$("div").animate({
top:150,
left:1000
},1000)};
donghua();
//这里设置了定时器想使流星滑动效果无限循环!可就是不好使,没效果~跪求解决方法~~
var timer=setInterval(donghua,1000);
</script>
</body>
动画到达指定位置后,你没有设置元素回到指定位置,donghua方法中应该像下面这样在动画结束后让元素回到初始位置
function donghua(){
$("div").animate({
top:150,
left:1000
}, 1000, function(){
$("div").css({
"top" :初始top值,
"left" : 初始left值,
});
});
}
没加单位吧?
function donghua(){
var $div = $("div"),
startTop = $div.css("top"),
startLeft = $div.css("left");
$div.animate({
top:150,
left:1000
}, 1000, null, function(){
$div.css({
"top" : startTop,
"left" : startLeft
});
donghua();
});
}
donghua();
这样试试看?
写了个sample,替换下jquery引用应该就可以看到效果,在donghua()的回调函数里把位置值重置。
animate()写多个值{top:"300px",left:"300px"}
css()写多个值{"top":"10px","left":"10px"}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{width: 30px;height: 30px; background-color: pink;position: absolute;top:0;left:0;}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var timer=setInterval(donghua,1000);
function donghua(){
$("div").animate({top:"300px",left:"300px"},1000,function(){
$("div").css({"top":0,"left":0});
});
}
</script>
</head>
<body>
<div></div>
</body>
</html>
第一次动画后,你的元素没回去。
<script>
function donghua(){
$("div").animate({
top:150,
left:1000
},1000)};
donghua();
var timer=setInterval(donghua,1000);
</script>
donghua();
执行完后,div元素已经移动到指定位置了,那么下次执行动画就会从 top:150,left:1000的位置开始移动,你说是个什么效果呢~~~
正好之前写过一个类似的动画,你可以参考着看看:效果 demo