jquery-animate()
阿新 • • 發佈：2017-10-31
script anim art head dom元素 false col height round
1 <style> 2 .big{ 3 /*width: 50px;*/ 4 height: 50px; 5 background-color: #53ff53; 6 position: relative; 7 } 8 </style> 9 <script src="jquery/jquery-3.1.0.js"></script> 10 </head> 11 <body> 12<div class="big"></div> 13 <script> 14 // animate()不支持非數字的屬性，比如transform屬性 15 // 按照動畫的先後順序執行 16 // $(".big").click(function(){ 17 // $(this).animate({"left":"500px"},1000).animate({"top":"300px"}) 18 // }) 19 20 21 // 當設置queue為false的時候，該動畫不參與動畫隊列，而是直接開始執行22 // $(function(){ 23 // $(".big").animate({"width":"100px"},2000).animate({"height":"600px"},1000).animate({"left":"300px"},{queue:false,duration:3000}) 24 // }) 25 26 27 // step選項，每部動畫執行後調用的回調函數，接收兩個參數now，fx,this 是當前正在執行動畫的dom元素 28 // $(function(){ 29 // $(".big").animate({"left":"300px"},{step:function(now,fx){30 // $(this).css({"left":now,"transform":"rotate(30deg)"}); 31 // },duration:3000} 32 // ) 33 // }) 34 35 36 37 $(function(){ 38 $(".big").animate({"top":"250px"},{step:function(now,fx){ 39 // console.log(now,fx) 40 // now 每一步動畫屬性的數值 41 // fx jQuery.fx原型對象的一個引用，其中包含很多屬性，elem表示當前正在執行的動畫，start和end分別為動畫屬性的第一個和最後一個的數值，prop為進行中的動畫屬性 42 fx.elem.style.top=now; 43 },duration:3000}) 44 }) 45 46 47 48 </script>
jquery-animate()