Jquery對象動畫方法總結

注:中括號內爲可選參數

1.show()和hide():元素顯示和隱藏

      $("#div1").show([3000],[function(){}]),顯示元素第一個參數表示持續時間,第二個表示動畫完成時執行的函數

      $("#div1").hide([3000],[function(){}]),隱藏元素,第一個參數表示持續時間,第二個表示動畫完成時執行的函數

      $("#div1").toggle([3000],[function(){}]),實現元素隱藏和顯示,自動具備切換效果,參數與前面相同。

2.fadeIn()和fadeOut():元素淡入淡出

      $("#div1").fadeIn([3000],[function(){}]),元素淡入,第一個參數表示持續時間,第二個表示動畫完成時執行的函數

      $("#div1").fadeOn([3000],[function(){}]),元素淡出,第一個參數表示持續時間,第二個表示動畫完成時執行的函數

      $("#div1").fadeTo(3000,opacity,[function(){}]),元素透明度變化,第一個參數表示持續時間,第二個參數表示透明度值,最後一個表示動畫完成時執行的函數;

      $("#div1").fadeToggle([3000],[function(){}]),實現淡入淡出自動切換效果相當於二者的結合。

3.slideDown()和slideUp():元素滑動顯示和隱藏

      $("#div1").slideDown([3000],[function(){}]),滑動顯示元素第一個參數表示持續時間,第二個表示動畫完成時執行的函數

      $("#div1").slideUp([3000],[function(){}]),滑動隱藏元素,第一個參數表示持續時間,第二個表示動畫完成時執行的函數

      $("#div1").slideToggle([3000],[function(){}]),實現元素滑動隱藏和顯示,自動具備切換效果,參數與前面相同。

4.animate():動畫

      $("#div1").animate({width:300px,height:200px,left:50},[3000],[function(){}]),實現元素動畫,第一個是一個屬性集合,表示動畫要使得元素達到的效果,比如width:300,意味着動畫完成時元素寬度爲300px,第二個參數表示動畫持續時間,第三個參數表示動畫完成後執行的函數。

5.stop():停止元素當前執行動畫

      $("#div1").stop(),停止當前執行動畫,爲了保證前面四個動畫執行過程中,操作過於頻繁,使得出現動畫延遲或BUG(例如鼠標劃入時的圖片切換動作,有時鼠標劃入劃出動作頻繁,而每個動畫執行時間比較長,就會出現當最後鼠標劃入某張圖片標籤時,不會立即切換到該圖片,二是等之前動畫執行完再切換,這樣導致體驗很差),應當先執行stop(),停止之前的所有動畫,再執行相應的動畫,例如$("#div1").stop().animate()。

另外,上面的動畫執行方法中會有其它參數,這裏主要列出可能常用的參數,詳細情況可以看jqueryapi,這裏主要是作一個總結。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章