jQuery中利用递归思想练习自定义动画

Json____

于 2017-06-23 00:55:55 发布

阅读量745

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Drug_/article/details/73612548

版权

前端专栏收录该内容

87 篇文章 0 订阅

订阅专栏

技术QQ交流群:294088839

<!DOCTYPE html>

<html>
<head lang="en">
<meta charset="UTF-8">
<title>自定义动画</title>
<style>
div{
width: 100px;
height: 100px;
background:red;
position: absolute;
top: 50px;
color: #fff;
line-height: 100px;
text-align: center;
}
</style>
<script src="../jquery-1.8.2.js"></script>

</head>
<body>
<div>既然我们总是擦肩</div>
<div>那么思念有什么值得挂念</div>
<div>我会用怀念的姿态</div>
<div>回忆你的侧脸</div>
<div>是怀念不是思念</div>
<div>伊始的夏天</div>
<div>蝉鸣的折叠</div>
<div>崴蕤的夏天</div>
<div>不愿承认</div>

</body>
<script>
i=0;
$(window).on('ready',function test(){
$("div:eq("+i+")").animate({
width:'900px',
height:'600px',
lineHeight:'600px',
left:'500px',
fontSize:'80px'
},5000,function(){
i++;
//递归函数思想
$(this).delay(1000).hide(3000).next().animate(1000,test);
});
})
</script>
</html>