jquery动画函数有哪几种
jquery动画函数有17种:1、animate(),用于对被选元素应用自定义的动画;2、hide(),用于隐藏被选元素;3、show(),用于显示被选元素;4、fadeOut(),用于通过设置不透明度来隐藏元素;5、fadeTo()等等。
本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。
jquery动画函数
下面的表格列出了所有用于创建动画效果的 jQuery 方法。
下面来介绍一些常用动画函数。
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前端视频】
以上就是jquery动画函数有哪几种的详细内容,更多请关注海外IDC网其它相关文章!
【本文由:高防cdn http://www.558idc.com/gfcdn.html 复制请保留原URL】