jQuery慢慢啃之特效（八）

標籤：

1.show([speed,[easing],[fn]])\\顯示隱藏的匹配元素

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

//easing:(Optional) 用來指定轉場效果，預設是"swing"，可用參數"linear"

$("p").show()

$("p").show("slow");

$("p").show("fast",function(){   $(this).text("Animation Done!"); });

$("p").show(4000,function(){   $(this).text("Animation Done..."); });

2.hide([speed,[easing],[fn]])//隱藏顯示的元素
//speed:三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時間長度的毫秒數值(如：1000)
//easing:(Optional) 用來指定轉場效果，預設是"swing"，可用參數"linear"

$("p").hide()

$("p").hide("slow");

$("p").hide("fast",function(){   alert("Animation Done."); });

3.slideDown([speed],[easing],[fn])//通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成後可選地觸發一個回呼函數

$(".btn2").click(function(){  $("p").slideDown();});

$("p").slideDown("slow");

$("p").slideDown("fast",function(){   alert("Animation Done."); });

4.slideUp([speed,[easing],[fn]])//通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成後可選地觸發一個回呼函數。

$("p").slideUp("slow");

$("p").slideUp("fast",function(){   alert("Animation Done."); });

5.slideToggle([speed],[easing],[fn])//通過高度變化來切換所有匹配元素的可見度，並在切換完成後可選地觸發一個回呼函數

$("p").slideToggle("slow");

$("p").slideToggle("fast",function(){   alert("Animation Done."); });

6.fadeIn([speed],[easing],[fn])//通過不透明度的變化來實現所有匹配元素的淡入效果，並在動畫完成後可選地觸發一個回呼函數

$("p").fadeIn("slow");

("p").fadeIn("fast",function(){   alert("Animation Done."); });

7.fadeOut([speed],[easing],[fn])//通過不透明度的變化來實現所有匹配元素的淡出效果，並在動畫完成後可選地觸發一個回呼函數。

$("p").fadeOut("slow");

$("p").fadeOut("fast",function(){   alert("Animation Done."); });


8.fadeTo([[speed],opacity,[easing],[fn]])//把所有匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回呼函數。

$("p").fadeTo("slow", 0.66);

$("p").fadeTo("fast", 0.25, function(){   alert("Animation Done."); });

9.fadeToggle([speed,[easing],[fn]])//通過不透明度的變化來開關所有匹配元素的淡入和淡出效果，並在動畫完成後可選地觸發一個回呼函數。

$("p").fadeToggle("slow","linear");

$("p").fadeToggle("fast",function(){   alert("Animation Done."); });

10.animate(params,[speed],[easing],[fn])//用於建立自訂動畫的函數。
//注意：所有指定的屬性必須用駱駝形式，比如用marginLeft代替margin-left.

$("#go").click(function(){  $("#block").animate(
{     width: "90%",    height: "100%",     fontSize: "10em",     borderWidth: 10  }, 1000 );});

$("#right").click(function(){  $(".block").animate({left: ‘+50px‘}, "slow");});
$("#left").click(function(){  $(".block").animate({left: ‘-50px‘}, "slow");});

$("p").animate({   left: 50, opacity: ‘show‘ }, 500);

$("p").animate({   opacity: ‘show‘ }, "slow", "easein");

11.stop([clearQueue],[jumpToEnd])//停止所有在指定元素上正在啟動並執行動畫。

[clearQueue],[gotoEnd]Boolean,BooleanV1.2

clearQueue:如果設定成true，則清空隊列。可以立即結束動畫。

gotoEnd:讓當前正在執行的動畫立即完成，並且重設show和hide的原始樣式，調用回呼函數等。

[queue],[clearQueue],[jumpToEnd]BooleanV1.7

queue:用來停止動畫的隊列名稱

clearQueue:如果設定成true，則清空隊列。可以立即結束動畫。

jumpToEnd:如果設定成true，則完成隊列。可以立即完成動畫。

$("#stop").click(function(){  $("#box").stop();});

// 開始動畫$("#go").click(function(){  $(".block").animate({left: ‘+200px‘}, 5000);});// 當點擊按鈕後停止動畫$("#stop").click(function(){  $(".block").stop();});

11.delay(duration,[queueName])//設定一個延時來延遲執行隊列中之後的項目。

$(‘#foo‘).slideUp(300).delay(800).fadeIn(400);


12.finish( [queue ] )//停止當前正在啟動並執行動畫，刪除所有排隊的動畫，並完成匹配元素所有的動畫。

$("#complete").click(function(){  $("div").finish();});

13.jQuery.fx.off//關閉頁面上所有的動畫。

  jQuery.fx.off = true;  $("input").click(function(){ $("div").toggle("slow");  });

14.jQuery.fx.interval//設定動畫的顯示幀速

jQuery.fx.interval = 100;$("input").click(function(){  $("div").toggle( 3000 );});

jQuery慢慢啃之特效（八）