jQuery学习笔记第六节/Jq的效果之淡入淡出
淡入淡出
其实淡入淡出的一个动画原理就是调整元素的透明度,更多精彩内容,请往下看...
在 jq 中有四种方法可以让元素执行一个淡入淡出的效果,如下所示:
fadeIn()fadeOut()fadeToggle()fadeTo()
下面开始对每一个方法进行一个详细的说明:
1.fadeIn()
这个方法会让已经隐藏的元素淡入...和 show.hide类似,可以没有参数,也可以有1个或者2个参数.参数1是动画执行的时间,可选 slow.fast.或者毫秒时间.第二个参数是动画执行完毕的回调函数.
1.//这个代码展示的是 fadeIn()的使用
2.<!DOCTYPE html>
3. <html>
4. <head>
5. <meta charset="UTF-8">
6. <title></title>
7. <style type="text/css">
8. .input_box{text-align: center;height: 20px;}
9. div{height: 100px;border: 1px solid bisque;}
10. </style>
11. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
12. </head>
13. <body>
14. <div class="input_box">
15. <input type="button" name="danru" id="danru" value="淡入" />
16. <input type="button" name="danchu" id="danchu" value="淡出" />
17. </div>
18. <div class="content" style="display: none;">我是测试用的盒子</div>
19. </body>
20. <script type="text/javascript">
21. $(function(){
22. $("#danru").click(function(){
23. $(".content").fadeIn("slow",function(){
24. //回调函数会改变这个元素的 text 和 css.
25. $(this).text("我是fadeIn 出来的,呵呵哒!").css("height","200px");
26. });
27. })
28. })
29. </script>
30.</html>
2.fadeOut()
和上面的方法是相反的,这个方法会将已经显示的元素淡出.淡入淡出的原理其实就是改变了这个元素的透明度,前者是0到1,后者是从1到0
1.//这段代码演示的是如何使用 fadeOut()来动画隐藏一个已经存在的元素.
2.$("#danchu").click(function(){
3. $(".content_two").fadeOut("slow",function(){
4. //回调函数会改变这个元素的 text 和 css.
5. $(this).text("我是fadeOut 出去的,呵呵哒!").css("height","200px");
6. });
7.})
和上面的方法刚好是相反的,其实也是很简单的啦...
3.fadeToggle().
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
和 show().hide()这两个方法的 toggle()是一样的.就是在两个状态之间进行取反操作.
废话不多说,直接上代码
1.<!DOCTYPE html>
2. <html>
3. <head>
4. <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
5. </script>
6. <script>
7. $(document).ready(function(){
8. $("button").click(function(){
9. $("#div1").fadeToggle();
10. $("#div2").fadeToggle("slow");
11. $("#div3").fadeToggle(3000);
12. });
13. });
14. </script>
15. </head>
16. <body>
17. <p>Demonstrate fadeToggle() with different speed parameters.</p>
18. <button>Click to fade in/out boxes</button>
19. <br><br>
20. <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
21. <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
22. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
23. </body>
24.</html>
4.fadeTo()
这个方法很容易就可以联想到是设置什么东西,然后我们想到了 fade 动画的原理其实就是设置一个元素透明度.但是默认的的方法会将元素从0->1或者是从1->0这样变化的.使用 fadeTo()我们多了一个参数,我们可以设置透明度的值!我们可以自定义元素的动画结束的时候,元素的透明值是多少.真的是爽歪歪.
废话不多说,直接看代码:
1.//下面这段代码的意思就当点击 button的时候改变 div1,2,3的透明度,分别设置了0.15,0.4,0.7.
2.//可以看出来这个fadeTo()这个方法可以设置3个参数,分别是动画执行的事件,透明度的数值.以及最后动画执行完毕的回调函数.
3.$("button").click(function(){
4. $("#div1").fadeTo("slow",0.15);
5. $("#div2").fadeTo("slow",0.4);
6. $("#div3").fadeTo("slow",0.7);
7.});
结束:关于淡入淡出的动画的方法写到了这里就算是结束了...这一节的 B 装完了,撒花鼓掌,退朝~
