當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

js进阶 13-5 jquery队列动画如何实现

發(fā)布時(shí)間：2023/11/27 生活经验 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 js进阶 13-5 jquery队列动画如何实现小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

js進(jìn)階 13-5 jquery隊(duì)列動(dòng)畫如何實(shí)現(xiàn)

一、總結(jié)

一句話總結(jié)：同一個(gè)jquery對(duì)象，直接寫多個(gè)animate()就好。

1、什么是隊(duì)列動(dòng)畫？

比如說先左再下，而不是左下一起走

2、怎么實(shí)現(xiàn)隊(duì)列動(dòng)畫？

a、可以考慮用animate的動(dòng)畫結(jié)束函數(shù)來實(shí)現(xiàn)，但是這樣的話太麻煩，一則嵌套容易出錯(cuò)，二則不適合多重隊(duì)列動(dòng)畫
animate(params,[speed],[easing],[fn])

25     $('#btn2').click(function(){ 26  $('#div1').animate({ 27  left:'300px' 28  },1000,function(){ 29  $('#div1').animate({ 30  top:'300px' 31  },function(){ 32  $('#div1').animate({ 33  left:'50px' 34  }) 35  }) 36  }) 37  })

b、直接寫多個(gè)animate()就好

38         $('#btn3').click(function(){ 39  $('#div1').animate({left:'300px'}) 40  .animate({top:'300px'}) 41  .animate({left:'30px'}) 42  })

二、jquery隊(duì)列動(dòng)畫如何實(shí)現(xiàn)

1、自定義動(dòng)畫

jQuery動(dòng)畫是通過將元素的某一個(gè)屬性從"一個(gè)屬性值"在指定時(shí)間內(nèi)平滑地過渡到"另外一個(gè)屬性值"來實(shí)現(xiàn)，原理跟CSS3動(dòng)畫原理是一樣的。

animate()方法執(zhí)行CSS屬性集的自定義動(dòng)畫。
語法：animate(params,[speed],[easing],[fn])

參數(shù)：params:一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的

集合注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left

2、代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文檔</title>
 6     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 7     <style type="text/css">
 8         input{width: 100px;height: 30px;}
 9         #div1,#div2,#div3{width: 100px;height: 100px;border:1px solid green;display: inline-block;background: orange;position: absolute;left: 10px;top: 100px}
10       </style>
11 </head>
12 <body>
13     <h3>jQuery動(dòng)畫效果</h3>
14     <input id="btn1" type="button" value="animate">
15     <input id="btn2" type="button" value="隊(duì)列動(dòng)畫1">
16     <input id="btn3" type="button" value="隊(duì)列動(dòng)畫2"><br>
17         <div id="div1" style="width: 100PX;height: 100PX;background: red">jQuery動(dòng)畫效果</div>
18     <script type="text/javascript">
19     $('#btn1').click(function(){
20             $('#div1').animate({
21                 left:'300px',
22                 top:'300px'
23             },1000)
24         })
25     $('#btn2').click(function(){
26             $('#div1').animate({
27                 left:'300px'
28             },1000,function(){
29                 $('#div1').animate({
30                     top:'300px'
31                 },function(){
32                     $('#div1').animate({
33                         left:'50px'
34                     })
35                 })
36             })
37         })
38         $('#btn3').click(function(){
39             $('#div1').animate({left:'300px'})
40                       .animate({top:'300px'})
41                       .animate({left:'30px'})
42         })
43     </script>
44     
45 </body>
46 </html>

轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/9313286.html

總結(jié)

以上是生活随笔為你收集整理的js进阶 13-5 jquery队列动画如何实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。