您好,登录后才能下订单哦!
本篇内容主要讲解“jquery动画函数有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery动画函数有哪些”吧!
jquery动画函数有17种:1、animate(),用于对被选元素应用自定义的动画;2、hide(),用于隐藏被选元素;3、show(),用于显示被选元素;4、fadeOut(),用于通过设置不透明度来隐藏元素;5、fadeTo()等等。
本教程操作环境: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动画函数有哪些”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。