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