6.1 基本效果

.hide() 與 .show()

分別觀察以下程式：

$("div.div_block").hide();

$("div.div_block").hide(10000);

$("div.div_block").hide(10000).show(10000);

$("div.div_block").toggle(10000);

代入完成動畫效果之後所要執行的函式參數，例：

$("div.div_block").hide(function(){
  alert("跑完效果，自訂其它程式");
});


$("div.div_block").hide(10000, function(){
  alert("跑完效果，自訂其它程式");
});

範例：6_1_hide_show.html

需在「開發者工具」中，看是什麼發生了變化。為何隱藏、為何出現。

.fadeIn()、 .fadeOut() 與 fadeTo()

分別觀察以下程式：

$("div.div_block").fadeOut();

$("div.div_block").fadeOut(10000);

$("div.div_block").fadeOut(10000).fadeIn(10000);

$("div.div_block").fadeTo(10000, 0.2);

$("div.div_block").fadeIn(10000);

範例：6_1_fade.html

.slideUp()、.slideDown()、.slideToggle()

分別觀察以下程式：

$("div.div_block").slideUp();

$("div.div_block").slideUp(10000);

$("div.div_block").slideUp(10000).slideDown(10000);

$("div.div_block").slideToggle(10000);

範例：6_1_slide.html

以上都可代入最後的函式參數，代表跑完動畫效果後，所要執行的自訂程式。

範例：(燈箱 or Modal or Lightbox)

範例：6_1_modal.html