6 jQuery学习笔记第六节 Jq的效果之淡入淡出-CSDN博客

####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.});
复制代码