本文重点解决jQuey动画效果问题,希望能够帮助到你
jQuery animate() 方法用于创建自定义动画。
语法:$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用;它把元素移动到左边,3秒时间到 left 属性等于 500 像素为止:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画</title> 6 <style> 7 *{margin:0;padding:0;} 8 #div2{width:100px;height:100px;background:orange;position:absolute;} 9 </style> 10 <!-- jquery自己引入就好,我这里的是jquery-1.12.0.min.js --> 11 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 12 <script type="text/javascript"> 13 $(document).ready(function(){ 14 $("#bt1").click(function(){ 15 $("#div2").animate({ 16 left:'500px', 17 top:'150px', 18 opacity:'0.5', 19 },3000); 20 }); 21 }); 22 </script> 23 </head> 24 <body> 25 <button id="bt1">开始</button> 26 <div id="div2">我是内容</div> 27 </body> 28 </html>
本网刊登的文章均仅代表作者个人观点,并不代表本网立场。文中的论述和观点,敬请读者注意判断。