當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

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

發布時間：2023/11/27 生活经验 34 豆豆

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

js進階 13-5 jquery隊列動畫如何實現

一、總結

一句話總結：同一個jquery對象，直接寫多個animate()就好。

1、什么是隊列動畫？

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

2、怎么實現隊列動畫？

a、可以考慮用animate的動畫結束函數來實現，但是這樣的話太麻煩，一則嵌套容易出錯，二則不適合多重隊列動畫
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、直接寫多個animate()就好

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

二、jquery隊列動畫如何實現

1、自定義動畫

jQuery動畫是通過將元素的某一個屬性從"一個屬性值"在指定時間內平滑地過渡到"另外一個屬性值"來實現，原理跟CSS3動畫原理是一樣的。

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

參數：params:一組包含作為動畫屬性和終值的樣式屬性和及其值的

集合注意：所有指定的屬性必須用駱駝形式，比如用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動畫效果</h3>
14     <input id="btn1" type="button" value="animate">
15     <input id="btn2" type="button" value="隊列動畫1">
16     <input id="btn3" type="button" value="隊列動畫2"><br>
17         <div id="div1" style="width: 100PX;height: 100PX;background: red">jQuery動畫效果</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>

轉載于:https://www.cnblogs.com/Renyi-Fan/p/9313286.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：绯闻女孩第五季B的孩子到底是谁的
下一篇： MAC和windows开发操作系统环境，