[TOC] # 案例1：顯示/隱藏  ``` $(function(){ $("button").eq(0).click(function(){ //$("div").hide(); //$("div").hide("fast"); $("div").hide(200,function(){ console.log("div已經隱藏") }); }) $("button").eq(1).click(function(){ //$("div").hide(); //$("div").hide("fast"); $("div").show(200,function(){ console.log("div已經顯示") }); }) $("button").eq(2).click(function(){ $("div").toggle(200,function(){ console.log("切換完畢") }); }) }) ``` # 案例2：淡入淡出  ``` $(function(){ $("button").eq(0).click(function(){ $("div").fadeOut(1000,function(){ console.log("div已經淡出") }); }) $("button").eq(1).click(function(){ $("div").fadeIn(1000,function(){ console.log("div已經淡入") }); }) $("button").eq(2).click(function(){ $("div").fadeTo(1000,.1,function(){ console.log("div已經改變透明度為0.1") }); }) }) ``` # 案例3：滑入滑出  ``` $(function(){ $(".first>li").mouseover(function(){ $(this).find("ul").stop().slideDown(100); }).mouseout(function(){ $(this).find("ul").stop().slideUp(100); }) }) ``` # 案例4：自定義動畫  ``` function fun(){ $("img").animate({"left":"300px","width":"200px"},2000,function(){ $("img").css({"transform":"rotateY(180deg)"}) }).animate({"left":"0px","width":"100px"},2000,function(){ $("img").css({"transform":"rotateY(0deg)"}) }) } ``` # 案例5：模擬用戶操作 * [ ] 自動點擊按鈕  ``` $("button").click(); ```