1、jQuery的切換
jQuery toggle() 函數使用 show() 或 hide() 函數來切換 HTML 元素的可見狀態。
隱藏顯示的元素，顯示隱藏的元素。
語法：$(selector).toggle(speed,callback)
speed 參數可以設置這些值："slow", "fast", "normal" 或 毫秒。
實例：
1 $("button").click(function(){ 2 $("p").toggle(); 3 });
callback 參數是在該函數完成之后被執行的函數名稱。
2、jQuery 滑動函數 - slideDown, slideUp, slideToggle
jQuery 擁有以下滑動函數：
$(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed 參數可以設置這些值："slow", "fast", "normal" 或毫秒。
slideDown() 實例：
1 $(document).ready(function () { 2 $(".flip").click(function () { 3 $(".panel").slideDown("slow");
slideUp() 實例：
1 $(".flip").click(function(){ 2 $(".panel").slideUp("slow") 3 })
slideToggle() 實例:
1 <script type="text/javascript"> 2 $(document).ready(function () { 3 $(".flip").click(function () { 4 $(".panel").slideToggle("slow"); 5 }); 6 }); 7 </script>
jQuery Fade 函數 - fadeIn(), fadeOut(), fadeTo()
jQuery 擁有以下 fade 函數：
$(selector).fadeIn(speed,callback) 通過調整不透明度淡入所有匹配的元素。 $(selector).fadeOut(speed,callback) 將所有匹配元素的不透明度淡化為一個指定的不透明度。 $(selector).fadeTo(speed,opacity,callback) 將所有匹配元素的不透明度淡化為一個指定的不透明度。
speed 參數可以設置這些值："slow", "fast", "normal" 或 毫秒。
fadeTo() 函數中的 opacity 參數規定減弱到給定的不透明度。
callback 參數是在該函數完成之后被執行的函數名稱。
代碼示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>test fadeTo</title> 5 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("button").click(function () { 9 $("div").fadeTo("slow",0.25); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <div id="test" style="background: yellow; width: 300px; height: 300px"> 16 <button type="button"> 17 點擊這里查看淡出效果</button> 18 </div> 19 </body> 20 </html>
fadeOut() 示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Test fadeOut()</title> 5 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("#test").click(function () { 9 $(this).fadeOut("slow"); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <div id="test" style="background: yellow; width: 200px"> 16 CLICK ME AWAY!</div> 17 <p> 18 如果您點擊上面的框，它會淡出直到消失為止。</p> 19 </body> 20 </html>
jQuery 自定義動畫
jQuery 函數創建自定義動畫的語法：
$(selector).animate({params},[duration],[easing],[callback])
關鍵的參數是 params。它定義產生動畫的 CSS 屬性。可以同時設置多個此類屬性：
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二個參數是 duration。它定義用來應用到動畫的時間。它設置的值是："slow", "fast", "normal" 或毫秒。
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 $("#start").click(function(){ 4 $("#box").animate({height:300},"slow"); 5 $("#box").animate({width:300},"slow"); 6 $("#box").animate({height:100},"slow"); 7 $("#box").animate({width:100},"slow"); 8 }); 9 }); 10 </script>
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 $("#start").click(function(){ 4 $("#box").animate({left:"100px"},"slow"); 5 $("#box").animate({fontSize:"3em"},"slow"); 6 }); 7 }); 8 </script>
HTML 元素默認是靜態定位，且無法移動。
如需使元素可以移動，請把 CSS 的 position 設置為 relative 或 absolute。
jQuery效果的函數總結：
| 函數 | 描述 |
|---|---|
| $(selector).hide() | 隱藏被選元素 |
| $(selector).show() | 顯示被選元素 |
| $(selector).toggle() | 切換（在隱藏與顯示之間）被選元素 |
| $(selector).slideDown() | 向下滑動（顯示）被選元素 |
| $(selector).slideUp() | 向上滑動（隱藏）被選元素 |
| $(selector).slideToggle() | 對被選元素切換向上滑動和向下滑動 |
| $(selector).fadeIn() | 淡入被選元素 |
| $(selector).fadeOut() | 淡出被選元素 |
| $(selector).fadeTo() | 把被選元素淡出為給定的不透明度 |
| $(selector).animate() | 對被選元素執行自定義動畫 |