jquery中關於​​動畫的實例教程

jQuery動畫

1.左上角的縮放效果

hide([speed,[fn]])

　　概述：隱藏顯示的元素

　　參數：speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

　　　　  fn:在動畫完成時執行的函數，每個元素執行一次。

// $(":button[value=隱藏]").click(function(){
// $("div").hide(2000,function(){
// alert("div隱藏了");
// });
// })

#show([speed,[fn]])

　　概述：顯示隱藏的符合元素。

// $(":button[value=顯示]").click(function(){
// $("div").show(2000,function(){
// alert("div顯示了");
// });
// })

#toggle([speed],[fn])

　　概述：如果元素是可見的，切換為隱藏的；如果元素是隱藏的，則切換為可見的。

 // //toggle([speed],[fn]) 如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的
// $(": button[value=明確]").click(function(){
// $("div").toggle(2000);
// })

 

 

2.上下的縮放效果 

slideUp(speed, [callback])

　　概述：透過高度變化（向上減少）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回調函數。

　　參數: speed 三種預定速度之一的字串("slow", "normal", or "fast")或表示動畫時長的毫秒數值(如：1000) callback (可選) 在動畫完成時執行的函數

//slideUp(speed, [fn]) 透過高度變化（向上減少）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回調函數
// $(":button[value=隱藏]").click(function(){
// $("div").slideUp(2000);
// })

slideDown(speed, [callback])

　　概述：透過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回調函數。

// //slideDown(speed, [fn]) 透過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回調函數
//          $(":button[value=顯示]").click(function(){
// $("div").slideDown(2000);
// })

# #slideToggle([speed],[fn])
　　概述：透過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回調函數。

//slideToggle([speed],[fn]) 透過高度變化來切換所有匹配元素的可見性，並在切換完成後可選地觸發一個回調函數
//          $(" :button[value=明確]").click(function(){
// $("div").slideToggle(2000);
// })

# 

# 

3.淡入淡出效果（不透明度的變化） 

fadeOut(speed, [callback])

　　概述：透過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。

// $(":button[value=隱藏]").click(function(){
// $("div").fadeOut(2000);
// } )

fadeIn(speed, [callback])

　　概述：透過不透明度的變化來實現所有匹配元素的淡入效果，並在動畫完成後可選地觸發一個回呼函數。

$(":button[value=顯示]").click(function(){
// $("div").fadeIn(2000);
// })

fadeToggle([speed,[fn]])

　　概述：透過不透明度的變化來開關所有匹配元素的淡入和淡出效果，並在動畫完成後可選地觸發一個回調函數。

$(":button[value=隱性]").click(function(){
// $("div").fadeToggle(2000);
// })

fadeTo(speed,opacity,[fn])

　　概述：把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回調函數。

// $(":button[value=隱藏]").click(function(){
// $("div").fadeTo(2000,0.5);
/ / })

 

 

4.自訂動畫

animate(params,[speed],[fn])

#概述：用於建立自訂動畫的函數。

//          $("div").animate({"left":"1000px"},2000);

 

stop([clearQueue], [gotoEnd ])

　　概述：停止所有在指定元素上正在運行的動畫。

　　參數： clearQueue (可選)如果設定成true，則清空佇列。可以立即結束動畫。

               gotoEnd (可選)讓目前正在執行的動畫立即完成。

// $(document).click(function(){
// $("div").stop()
// })

 

#delay(duration)

　　概述：設定一個延遲來延遲執行佇列中之後的項目。

　　參數duration 延遲時間，單位：毫秒

//          $("div").delay(2000).animate({"left":"1000px"},2000);

以上是jquery中關於​​動畫的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！