本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。
jquery动画函数
下面的表格列出了所有用于创建动画效果的 jQuery 方法。
| 方法 | 描述 |
|---|---|
| animate() | 对被选元素应用”自定义”的动画 |
| clearQueue() | 对被选元素移除所有排队函数（仍未运行的） |
| delay() | 对被选元素的所有排队函数（仍未运行）设置延迟 |
| dequeue() | 移除下一个排队函数，然后执行函数 |
| fadeIn() | 逐渐改变被选元素的不透明度，从隐藏到可见 |
| fadeOut() | 逐渐改变被选元素的不透明度，从可见到隐藏 |
| fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
| fadeToggle() | 在 fadeIn() 和 fadeOut() 方法之间进行切换 |
| finish() | 对被选元素停止、移除并完成所有排队动画 |
| hide() | 隐藏被选元素 |
| queue() | 显示被选元素的排队函数 |
| show() | 显示被选元素 |
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideToggle() | slideUp() 和 slideDown() 方法之间的切换 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| stop() | 停止被选元素上当前正在运行的动画 |
| toggle() | hide() 和 show() 方法之间的切换 |
下面来介绍一些常用动画函数。
1、animate()
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。
提示：请使用 “+=” 或 “-=” 来创建相对动画。
示例：通过改变元素的高度，对元素应用动画：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("#btn1").click(function() { $("#box").animate({ height: "300px" }); }); $("#btn2").click(function() { $("#box").animate({ height: "100px" }); }); }); </script> </head> <body> <button id="btn1">使用动画放大高度</button> <button id="btn2">重置高度</button> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> </body> </html>
2、hide()、show()和toggle()
-
hide() 方法隐藏被选元素。
-
show()显示被选元素
-
toggle()：hide() 和 show() 方法之间的切换
示例：隐藏或显示 <p> 元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $(".btn1").click(function() { $("p").hide(); }); $(".btn2").click(function() { $("p").show(); }); }); </script> </head> <body> <p>这是一个段落。</p> <button class="btn1">隐藏</button> <button class="btn2">显示</button> </body> </html> </html>
3、slideUp() 、slideDown()和slideToggle()
-
slideUp() 方法：以滑动方式隐藏被选元素。
-
slideDown() 方法：以滑动方式显示被选元素。
-
slideToggle() 方法：slideUp() 和 slideDown()方法之间的切换
示例：以滑动方式隐藏 <p> 元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $(".btn1").click(function() { $("p").slideUp(); }); $(".btn2").click(function() { $("p").slideDown(); }); }); </script> </head> <body> <p>这是一个段落。</p> <button class="btn1">上滑</button> <button class="btn2">下滑</button> </body> </html>
4、fadeIn() 、 fadeOut()和fadeToggle()
-
fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）。
-
fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。
-
fadeToggle()：fadeIn() 和 fadeOut()方法之间的切换
示例：使用淡入效果显示 <p> 元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $(".btn1").click(function() { $("p").fadeOut() }); $(".btn2").click(function() { $("p").fadeIn(); }); }); </script> </head> <body> <p>这是一个段落。</p> <button class="btn1">淡出</button> <button class="btn2">淡入</button> </body> </html>
5、fadeTo()
fadeTo() 方法逐渐改变被选元素的不透明度为指定的值（褪色效果）。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("p").fadeTo(1000, 0.4); }); }); </script> </head> <body> <button>逐渐改变P元素的不透明度</button> <p>这是一个段落。</p> </body> </html>
…..
【推荐学习：jQuery视频教程、web前端视频】
