JQuery Effects

• hide(speed[, callback()]), show(speed[, callback()]), toggle(speed[, callback()]): 隱藏與顯示element。 >>
  <p id="jq3_p1a" class = "p12_7">滑鼠點這裡</p> <p id="jq3_p1b" class = "p12_7">也點這裡試試</p> <button id="jq3_b1">Show</button> <p id="jq3_p1c" class = "p12_7">Click the toggle button</p> <button id="jq3_b2">Toggle</button> $(document).ready(function() { $("#jq3_p1a").click(function(){ $("#jq3_p1a").hide(); }); $("#jq3_p1b").click(function(){ $("#jq3_p1b").hide(2000); console.log("hidden"); }); $("#jq3_b1").click(function(){ $("#jq3_p1a").show(); $("#jq3_p1b").show(2000, function(){ $("#jq3_p1b").append(" Coming back..."); }); }); $("#jq3_b2").click(function(){ $("#jq3_p1c").toggle(2000, function(){ $("#jq3_p1c").append(" Appear again..."); }); }); });

  滑鼠點這裡

  也點這裡試試

  Show

  Click the toggle button

  Toggle
  不使用callback函數也能達到類似效果，不過執行順序不同，callback在show或hide完成後執行。
• fadeIn(speed[, callback()]), fadeOut(speed[, callback()]), fadeToggle(speed[, callback()]), fadeTo(speed, opacity[, callback()]): 漸顯與淡出。 >>
  <div class="container"> <div id = "jq3_d2a" style="width:50px; height:50px; background:green; color:white; text-align:center; line-height:40px">a</div> <div id = "jq3_d2b" style="width:50px; height:50px; background:orange;color:white; text-align:center; line-height:40px"">b</div> <div id = "jq3_d2c" style="width:50px; height:50px; background:purple;color:white; text-align:center; line-height:40px"">c</div> <div id = "jq3_d2d" style="width:50px; height:50px; background:red;color:white; text-align:center; line-height:40px"">T</div> <div id = "jq3_d2e" style="width:50px; height:50px; background:blue;color:white; text-align:center; line-height:40px"">O</div> </div> <input type="button" value="FadeIn" id="jq3_b2a"></input> <button id="jq3_b2b">fadeToggle</button> <button id="jq3_b2c">fadeTo</button> $(document).ready(function() { // fadeIn $("#jq3_b2a").click(function(){ console.log("Press......"); $("#jq3_d2a").fadeIn(); $("#jq3_d2b").fadeIn(2000); $("#jq3_d2c").fadeIn(2000, function(){ $("#jq3_d2c").text("X"); }); }); // fadeOut $("#jq3_d2a").mouseover(function(){ $("#jq3_d2a").fadeOut(); }); $("#jq3_d2b").mouseover(function(){ $("#jq3_d2b").fadeOut(2000); }); $("#jq3_d2c").mouseover(function(){ $("#jq3_d2c").fadeOut(2000, function(){ console.log("Press FadeIn Button to Fade in."); }); }); //fadeToggle $("#jq3_b2b").click(function(){ $("#jq3_d2d").fadeToggle(2000, function(){ $("#jq3_d2d").text("X"); }); }); //fadeTo $("#jq3_b2c").click(function(){ $("#jq3_d2e").fadeTo(2000, 0.3, function(){ $("#jq3_d2e").text("Z"); }); }); });
  a

  b

  c

  T

  O
  fadeToggle fadeTo
• slideDown(speed[, callback()]), slideUp(speed[, callback()]), slideToggle(speed[, callback()]): 滑進與滑出。 >>
  <p id="jq3_p3" style="text-align:center; background:#5588ff;margin-bottom:0px;">Move mouse here</p> <div id="jq3_d3" style="text-align:center; background:#55ff88; height:250px;margin:0px;">Show Area</div> <button id="jq3_b3">Slide Toggle</button> $(document).ready(function() { $("#jq3_p3").mouseout(function(){ $("#jq3_d3").slideDown(2000); }); $("#jq3_p3").mouseover(function(){ $("#jq3_d3").slideUp(2000, function(){ $("#jq3_d3").append("Coming back..."); }); }); $("#jq3_b3").click(function(){ $("#jq3_p3").slideToggle(2000); }); });

  Move mouse here

  Show Area
  Slide Toggle
• animate({parameters}[,duration, easing, callback()]): 動畫。
• stop(stopAll, goToEnd): 停止effects(not only animate)，default參數為false, false。 >>
  <div style="height:50px;padding:0px;"> <div id="jq3_d4" style="background:lime;width:50px;height:50px;text-align:center;line-height:40px;margin:0px;">點</div> </div> <button id="jq3_b4">Stop</button> $(document).ready(function() { $("#jq3_d4").click(function(){ $("#jq3_d4").animate({opacity: 0.5, marginLeft: '700px', width: "100px"}, 6000, 'swing', function(){ $("#jq3_d4").text("Done"); }).animate({opacity: 1, marginLeft: '0px', width: "50px"}, 6000, 'linear', function(){ $("#jq3_d4").text("點"); }); }); $("#jq3_b4").click(function(){ $("#jq3_d4").stop(true, false); }); }); 兩個animate()連在一起表示先做第一個然後做第二個。
  點
  Stop