[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); }) }) ```