Jquery效果 动画
1. 介绍¶
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red") 其实就是可以当做是 jquery的css方法一样来使用,唯一不同的是,如果是用 animate方法的话,这个执行css不是一次性的,例如一个div的宽度从1000变成500,那么是带有动画执行的
jQuery animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback);
- 必需的 params 参数定义形成动画的 CSS 属性。
- 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
- 可选的 callback 参数是动画完成后所执行的函数名称。
2. 案例¶
- 动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <button>开始动画</button> <p>点击后,方块开始移动</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> </body> <script> $(function () { $('button').click(function () { $('div').animate({left:'100px'}); }); }); </script> </html>
默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。 如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
注意
Q: animate() 方法来操作所有 CSS 属性吗? A: 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
修改多个值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <button>开始动画</button> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </body> <script> $(function () { $('button').click(function () { $("div").animate({ left:'100px', opacity:'0.5', height:'150px', width:'150px', }); }) }); </script> </html>
加载完毕后,修改颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <button>开始动画</button> <div style="background:#bf2f82;height:100px;width:100px;position:absolute;"></div> </body> <script> $(function () { $("button").click(function() { $("div").animate({ width: '300px', height: '300px', left:'300px', marginTop:'300px' }, { duration: 3000, complete: function() { $("div").css("background-color", "red"); } }); }); }); </script> </html>
jQuery提供的animate()方法可以实现一些简单的动画效果,但是其核心库不提供颜色动画的效果,如果想实现颜色动画,需要下载相关插件。 但是,animate()的参数中有一个complete,通过它可以设置动画完成之后的执行函数,这时可以改变颜色。
- 停止
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <body> <button id="start">开始动画</button> <button id="stop">停止动画</button> <div style="background:#bf2f82;height:100px;width:100px;position:absolute;"></div> </body> <script> $(function () { $("#start").click(function() { $("div").animate({ width: '300px', height: '300px', left:'300px', marginTop:'300px' }, { duration: 3000, complete: function() { $("div").css("background-color", "red"); } }); }); $("#stop").click(function () { $('div').stop() }) }); </script> </html>