gpt4 book ai didi

javascript - 循环动画功能

转载 作者:搜寻专家 更新时间:2023-10-31 22:29:59 24 4
gpt4 key购买 nike

我如何使用 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 秒后重新开始动画,您可以增加它

<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>

关于javascript - 循环动画功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21178343/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com