jQuery 效果

jQuery - 隱藏/顯示

• jQuery hide() - 隱藏

$("#hide").click(function () {
   $("p").hide(); 
});

• jQuery show() - 顯示

$("#show").click(function () {
   $("p").show(); 
});

• 語法

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

• 可選的 speed 引數規定隱藏/顯示的速度，可以取以下值："slow"、"fast"或毫秒值
• 可選的 callback 引數是隱藏/顯示完成後所執行的函式名稱

// 該例項演示了帶有 speed 引數的 hide() 方法
$("button").click(function () {
   $("p").hide(3000); 
});

// 該例項演示了帶有 speed 引數的 hide() 方法，並使用回撥函式
$(document).ready(function () {
   $("hidebtn").click(function () {
       $("div").hide(1000,"linear",function () {
          alert("hide() 方法已完成！"); 
       });
   }) ;
});
 

• 引數 "linear" 表示過渡使用哪種緩動函式，jQuery 自身提供 "linear" 和 "swing"，其他可以使用相關外掛

jQuery toggle()

• 通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法

• 顯示被隱藏的元素，並隱藏已顯示的元素

• 語法

$(seelector).toggle(speed,callback);

$("button").click(function(){
  $("p").toggle(1000);
});
 

jQuery - 淡入/淡出

jQuery Fading 方法

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

jQuery fadeIn() 方法

• jQuery fadeIn() 用於淡入已隱藏的元素

• 語法

$(selector).fadeIn(speed,callback);

• 例項

$("button").click(function () {
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法

• jQuery fadeOut() 用於淡入出可見的元素

• 語法

$(selector).fadeOut(speed,callback);

• 例項

$("button").click(function () {
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法

• jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換

• 如果元素已淡出，則 fadeToggle() 會向元素新增淡入效果

• 如果元素已淡入，則 fadeToggle() 會向元素新增淡出效果

• 語法

$(selector).fadeToggle(speed,callback);

• 例項

$("button").click(function () {
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法

• jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）

• 語法

$(selector).fadeTo(speed,opacity,callback);

• 例項

$("button").click(function () {
    $("#div1").fadeTo("slow",0.12);
    $("#div2").fadeTo("slow",0.5);
    $("#div3").fadeTo("fast",0.85);
});

jQuery - 滑動

jQuery 滑動方法

• 通過 jQuery，您可以在元素上建立滑動效果
  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() 方法

• jQuery slideDown() 方法用於向下滑動元素
• 語法

$(selector).slideDown(speed,callback);

• 例項

$("#flip").click(function(){
  $("#panel").slideDown();
});

jQuery slideUp() 方法

• jQuery slideUp() 方法用於向上滑動元素
• 語法

$(selector). slideUp(speed,callback);

• 例項

$("#flip").click(function(){
  $("#panel"). slideUp();
});

jQuery slideToggle() 方法

• jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換
• 語法

$(selector).slideToggle(speed,callback);

• 例項

$("#flip").click(function(){
  $("#panel").slideToggle();
});

jQuery - 動畫

jQuery 動畫 - animate() 方法

• jQuery animate() 方法用於建立自定義動畫
• 語法

$(selector).animate({params},speed,callback);

• 必需的 params 引數定義形成動畫的 CSS 屬性
• 可選的 speed 引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒
• 可選的 callback 引數是動畫完成後所執行的函式名稱

// 例子演示 animate() 方法的簡單應用。它把 <div> 元素往右邊移動了 250 畫素
$("button").click(function(){
  $("div").animate({left:'250px'});
});

• 注意：預設情況下，所有 HTML 元素都有一個靜態位置，且無法移動。
  如需對位置進行操作，要記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute！

jQuery animate() - 操作多個屬性

• 生成動畫的過程中可同時使用多個屬性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

jQuery animate() - 使用相對值

• 也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

jQuery animate() - 使用預定義的值

• 可以把屬性的動畫值設定為 "show"、"hide" 或 "toggle"

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

jQuery animate() - 使用佇列功能

• 預設地，jQuery 提供針對動畫的佇列功能
• 這意味著如果您在彼此之後編寫多個 animate() 呼叫，jQuery 會建立包含這些方法呼叫的"內部"佇列。然後逐一執行這些 animate 呼叫

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

• 下面的例子把 <div> 元素往右邊移動了 100 畫素，然後增加文字的字號

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

jQuery stop() - 停止動畫

• jQuery stop() 方法用於停止動畫或效果，在它們完成之前
• stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫
• 語法

$(selector).stop(stopAll,goToEnd);

• 可選的 stopAll 引數規定是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行
• 可選的 goToEnd 引數規定是否立即完成當前動畫。預設是 false
• 因此，預設地，stop() 會清除在被選元素上指定的當前動畫

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

jQuery callback() - 回撥函式

• callback() 函式在當前動畫 100% 完成之後執行

// 以下例項在隱藏效果完全實現後回撥函式
$("button").click(function () {
   $("p").hide("slow",function () {
       alert("段落現在被隱藏了...");
   }) ;
});

// 以下例項沒有回撥函式，警告框會在隱藏效果完成前彈出
$("button").click(function () {
   $("p").hide("slow");
    alert("段落現在被隱藏了...");
});

jQuery Chaining - 鏈

• 通過 jQuery 可以把動作/方法連結在一起
• Chaining 允許我們在一條語句中執行多個 jQuery 方法（在相同的元素上）

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

• 當進行連結時，程式碼行會變得很長。不過，jQuery 語法不是很嚴格；您可以按照希望的格式來寫，包含換行和縮排

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

• jQuery 會拋掉多餘的空格，並當成一行長程式碼來執行上面的程式碼行