Sha*_*eer 3 html javascript css jquery
如何使用jquery循环动画功能？我有
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$(".b").click(function(){
var a=$(".abb");
a.animate({top:'100px',left:'400px'},"slow");
a.animate({top:'20px',left:'500px'},"slow");
a.animate({top:'500px',left:'100px'},"slow");
a.animate({top:'100px',left:'800px'},"slow");
a.animate({top:'200px',left:'100px'},"slow");
a.animate({top:'300px',left:'0px'},"slow");
a.animate({top:'600px',left:'300px'},"slow");
a.animate({top:'100px',left:'700px'},"slow");
a.animate({top:'300px',left:'100px'},"slow");
});
});
</script>
</head>
<body>
<button class="b"> click </button>
<div class="abb" style="width:100px;height:100px;background:#9F0;position:absolute;border-radius:70px;box-shadow:#000 1px 1px 3px 2px;"></div>
</body>
</html>
我希望上面的脚本能够持续工作.请协助
小智 5
试试这个.这将使动画在每5秒后重新开始,你可以增加它
<script type="text/javascript">
$(document).ready(function(){
$(".b").click(function(){
setInterval(animate_me,5000);
});
});
function animate_me()
{
var a=$(".abb");
a.animate({top:'100px',left:'400px'},"slow");
a.animate({top:'20px',left:'500px'},"slow");
a.animate({top:'500px',left:'100px'},"slow");
a.animate({top:'100px',left:'800px'},"slow");
a.animate({top:'200px',left:'100px'},"slow");
a.animate({top:'300px',left:'0px'},"slow");
a.animate({top:'600px',left:'300px'},"slow");
a.animate({top:'100px',left:'700px'},"slow");
a.animate({top:'300px',left:'100px'},"slow");
}
</script>