jQuery 效果

---

目錄

jQuery 隱藏/顯示
jQuery 淡入淡出
jQuery 滑動
jQuery 動畫
jQuery Callback

---

jQuery 隱藏/顯示

通過jQuery，我們可以使用hide(),show()和toggle()來隱藏和顯示指定的HTML元素。

語法
隱藏指定元素：$(selector).hide(speed,callback);
顯示指定元素：$(selector).show(speed,callback);
顯示被隱藏的元素同時隱藏顯示的元素：$(selector).toggle(speed,callback);

可選引數
speed：規定了隱藏/顯示的速度，可以取slow、fast、和毫秒。
callback：隱藏/顯示操作執行完後所執行的函式。

示例

$("#hide").click(function(){
  $("p").hide("fast");
});
$("#show").click(function(){
  $("p").show("slow");
});
$("button").click(function(){
  $("p").toggle(1000);
});

動手試一試：線上測試

---

jQuery 淡入淡出

通過jQuery fade方法可以實現元素的淡入淡出效果。

jQuery有以下四種fade方法:
淡入已隱藏的元素：$(selector).fadeIn(speed,callback);
淡出已顯示的元素：$(selector).fadeOut(speed,callback);
如果元素已淡出則新增淡入效果，如果元素已淡入則新增淡出效果：
$(selector).fadeToggle(speed,callback);
為元素淡入淡出設定不透明度：$(selector).fadeTo(speed,opacity,callback);

引數說明：
opacity:為淡入淡出效果設定不透明度，值介於0和1之間。

示例

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("fast",0.6);
  $("#div3").fadeTo(2000,0.35);
});

動手試一試：線上測試

---

jQuery 滑動

jQuery滑動方法可以使元素上下滑動。

語法
向下滑動元素：$(selector).slideDown(speed,callback);
向上滑動元素：$(selector).slideUp(speed,callback);
在上滑和下滑之間切換：$(selector).slideToggle(speed,callback);

示例

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

動手試一試：線上測試

---

jQuery 動畫

我們可以通過animate()方法來建立自定義動畫，
完成平移、縮放、淡入淡出等。

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

引數說明
params:引數定義要新增動畫的CSS屬性，比如height、width。

ps:animate()方法幾乎可以操作所有CSS屬性，不過，需要記住：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，

示例
目標向右完成平移、縮放、淡出：

$("button").click(function(){
  $("div").animate({
    left:'250px',       //也可以使用相對值，比如left:'+=250px'
    opacity:'0.5',
    height:'150px',     //或者使用預定義的值'show'、'hide'、'toggle'，如：height:'toggle'  
    width:'150px'
  });
});

動手試一試：線上測試

jQuery也提供佇列功能，我們可以編寫多個animate()呼叫，jQuery會依次執行這些呼叫。

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

動手試一試：線上測試

---

2015-5-12 施工ing