animate 動畫函數 · jQuery學習

## animate 動畫函數 ## 語法： ``` $(selectior).anmate(json,time,callBack); ``` ## 可以僅使用: $(selectior).anmate(json) ## 詳細語法： ~~~ $("div").animate({"left":500},2000,function(){ console.log("動畫完成后執行一次“callBack"); }); ~~~ ~~~ $("div").animate({"left":500,"top":300,"width":150},2000,function(){ console.log("動畫完成后執行一次“callBack"); }); ~~~ 第一個參數：json格式用來設置動畫完成最終的樣式屬性值。第二個參數：time動畫時間，，可有可無的（單位是毫秒）第三個參數為callBack，當動畫執行完畢的時候立即執行一次。（可以設置）也是可有可無的。 ## 代碼案例： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/jquery-3.2.1.min.js"></script> <style> *{ margin: 0; padding: 0; } div{ position:absolute; width:100px; height:100px; background:red; } </style> </head> <body> <div></div> </body> </html> <script type="text/javascript"> $("div").animate({"left":500},2000,function(){ console.log("動畫完成后執行一次“callBack"); }); </script> ~~~ ## 折疊卡動畫使用案例當點擊后執行動畫 $(".shouSou").click(function (){ $(".left").stop(true).animate({width:"0px"}); }); ~~~ $(".shouSou").click(function (){ if($(".left").width()===200){ $(".left").stop(true).animate({width:"0px"}) $(".shouSou").html("展開"); $(".listbiao").css("display","none"); }else { $(".left").stop(true).animate({width:"200px"}) $(".shouSou").html("收起"); $(".listbiao").css("display","block"); } }) ~~~