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"); } }) ~~~