jQuery中利用遞迴思想練習自定義動畫
阿新 • • 發佈：2019-01-18
技術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>
<!--<button>跑起來</button>-->
</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>