[toc] ### 1. 顯示與隱藏 hide() show() toggle() >效果  ``` $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }) $("#show").click(function(){ $("p").show(); }) $("#toggle").click(function(){ $("p").toggle(); }) }) ``` >效果  ``` <script> for(var i=0; i<5; i++){ $("<div>").appendTo(document.body); //自動加入5個div } $("div").click(function(){ $(this).hide(2000, function(){ //點擊隱藏并移除 $(this).remove(); }) }); </script> ``` ### 2. 淡入淡出 fadeIn() fadeOut() fadeToggle() >效果  ``` $(document).ready(function(){ $("#in").on("click", function(){ $("#box").fadeIn(1000); }) $("#out").on("click", function(){ $("#box").fadeOut(1000); }) $("#toggle").on("click", function(){ $("#box").fadeToggle(); //即使時間調成0依然會有淡入淡出效果 }) $("#to").on("click", function(){ $("#box").fadeTo(1000, .5); //透明度調成0.5 }) }) ``` ### 3. 滑動 slideDown() slideUp() slideToggle() >效果  ``` $(function(){ $("#flipshow").click(function(){ $("#content").slideDown(1000); }) $("#fliphide").click(function(){ $("#content").slideUp(1000); }) $("#fliptoggle").click(function(){ $("#content").slideToggle(1000); }) }) ``` ### 4. 回調 > 原理：在動畫結束后執行額外的函數或事件 ``` $(function(){ $("#btn").click(function(){ $("p").hide(1000, function(){ alert("動畫結束，這個方法被稱為回調"); }) }) }) ``` ``` $(function(){ $("#btn").click(function(){ $("#test").css("color", "red").slideUp(1000).slideDown(1000); }) }) ```