JQuery 淡出、 动画、显示/隐藏切换等效果
2012-01-01 22:00
791 查看
1、jQuery slideToggle() 表示简单的 slide panel 效果。
2、jQuery fadeTo()表示简单的淡出效果。
3、jQuery animate() 动画效果
4、显示/隐藏切换效果 $("p").toggle();
5、jQuery 效果
<html> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:70px; display:none; } </style> </head> <body> <p class="flip">请点击这里</p> <br/> <br/> <div class="panel" style="width:200px"> <p>JQuery</p> <p>爱,别太认真</p> </div>
2、jQuery fadeTo()表示简单的淡出效果。
<html> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").fadeTo("slow",0.25); }); }); </script> </head> <body> <div id="test" style="background:yellow;width:300px;height:300px"> <button type="button">点击这里查看淡出效果</button> </div> </body> </html>
3、jQuery animate() 动画效果
<html> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:500},"slow"); $("#box").animate({width:500},"slow"); $("#box").animate({height:150},"slow"); $("#box").animate({width:150},"slow"); }); }); </script> </head> <body> <p><a href="#" id="start">Start Animation</a></p> <div id="box" style="background:red;height:150px;width:150px;position:relative"> </div> </body> </html>
4、显示/隐藏切换效果 $("p").toggle();
html> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <button type="button">显示/隐藏切换效果</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html>
5、jQuery 效果
函数 | 描述 |
---|---|
$(selector).hide() | 隐藏被选元素 |
$(selector).show() | 显示被选元素 |
$(selector).toggle() | 切换(在隐藏与显示之间)被选元素 |
$(selector).slideDown() | 向下滑动(显示)被选元素 |
$(selector).slideUp() | 向上滑动(隐藏)被选元素 |
$(selector).slideToggle() | 对被选元素切换向上滑动和向下滑动 |
$(selector).fadeIn() | 淡入被选元素 |
$(selector).fadeOut() | 淡出被选元素 |
$(selector).fadeTo() | 把被选元素淡出为给定的不透明度 |
$(selector).animate() | 对被选元素执行自定义动画 |
相关文章推荐
- 2017/3/10 JQuery 淡出、 动画、显示/隐藏切换等效果
- 2017/3/10 JQuery 淡出、 动画、显示/隐藏切换等效果
- JQuery 淡出、 动画、显示/隐藏切换等效果
- jQuery学习_动作效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)
- jQuery效果:隐藏、显示、切换、滑动、淡入淡出、动画
- Jquery—效果(隐藏、显示、切换,滑动,淡入淡出及动画)
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- jQuery之动画效果(动画基础隐藏和显示,上卷下拉效果 ,淡入淡出效果 ,动画切换的比较,自定义动画,jQuery核心)
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- jQuery效果-隐藏、显示、切换、滑动、淡入淡出以及动画。
- JQuery 动画显示和隐藏效果
- 图片的动画效果(淡出,淡入,显示,隐藏等....外加左右移动)(HTML5)
- jquery动画之显示隐藏和切换
- JQuery 动画显示和隐藏效果
- jquery动画之滑入滑出与切换(与显示隐藏相似)
- JQuery的动画(显示、隐藏、淡出淡入、自定义动画)
- jquery学习笔记----隐藏、显示、切换,滑动,淡入淡出,以及动画
- jQuery——1、图片动画效果+2、点击切换div显示其内容
- jQuery点击按钮实现div的隐藏和显示切换效果
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果