在前面封装的move.js框架,在jquery中有一样封装好的功能animate()。使用方法很是相似,下面咱们看看animate的使用方法,有了原生的运动方法,而后再使用jquery的运动方法就会变得很是简单。javascript
$(selector).animate({params},speed,callback);
必需的params参数定义造成动画的css属性。
可选的speed参数规定效果的时长。它能够取如下值“slow”,“fast”或毫秒。
可选的callback参数是动画完成后所执行的函数名称。
注意:如需对位置进行操做,要记得首先把元素的CSS position属性设置为relative、fixed或absoult。css
<!DOCTYPE html> <html> <head> <style> #div1{ height:100px; width:100px; background:#f00; position:absolute; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px',height:'150px',width:'150px'},300,function(){ $("div").animate({opacity:'0.5'}) }); }); }); </script> </head> <body> <button>开始动画</button> <div id="div1"> </div> </body> </html>
经过上面的代码咱们能够看出jquery运动能够作多属性运动,也能够作链式运动,也能够作单属性运动。调用方式跟咱们用原始javascript封装的框架同样。区别在于这里能够设定速度。json串中带px等单位。jquery运动作链式运动的时候可使用回调函数,多写几个运动。animate的更多使用方法能够参考http://www.w3school.com.cn/jq...。html
注意:是否能够用animate()方法来操做全部css属性?是的,几乎能够!不过,须要记住一件重要的事情:当使用animate()时,必须使用Camel标记法书写全部的属性名,好比,必须使用paddingLeft而不是padding-left,使用marginRight而不是margin-right等等。同时,色彩动画并不包含在核心jQuery库中。若是须要生成颜色动画,您须要从jQuery.com下载Color Animations插件。java
<!DOCTYPE html> <html> <head> <title>jquery animate可使用预约义的值</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> #div1{ background: #f00; width: 100px; height: 100px; position: absolute; } </style> <script> $(function(){ $("button").click(function(){ $("div").animate({height:"toggle"}); }) }) </script> </head> <body> <button>开始动画</button> <div id="div1"></div> </body> </html>
咱们封装的运动没有队列功能。可是jquery提供针对动画的队列功能。这就意味着若是您在彼此以后编写多个animate()调用,jquery会建立包含这些方法调用的内部队列。而后逐一运动这些animate调用。jquery
<!DOCTYPE html> <html> <head> <title>animate队列调用</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> #div1{ width: 100px; height: 100px; background: #f00; position: absolute; } </style> <script> $(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:"300px",opacity:"0.4"},"slow"); div.animate({width:"300px",opacity:"0.8"},"slow"); div.animate({height:"100px",opacity:"0.4"},"slow"); div.animate({width:"100px",opacity:"0.8"},"slow"); }) }) </script> </head> <body> <button>开始动画</button> <div id="div1"></div> </body> </html>
stop()方法用于中止动画或效果,在它们完成以前。
stop()方法适用于全部jquery效果函数,包括滑动、淡入淡出和自定义动画。
语法:json
$(selector).stop(stopAll,goToEnd);
因此,默认的stop()会清除在被选元素上指定的当前动画。框架
<!DOCTYPE html> <html> <head> <title>stop()清除当前运动</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function() { $("#flip").click(function() { $("#panel").slideDown(5000); }); $("#stop").click(function() { $("#panel").stop(); }); }); </script> <style type="text/css"> #panel,#flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> </head> <body> <button id="stop">中止滑动</button> <div id="flip">点击这里,向下滑动面板</div> <div id="panel">Hello world!</div> </body> </html>