jQuery學習筆記第六節(jié)/Jq的效果之淡入淡出
淡入淡出
其實淡入淡出的一個動畫原理就是調(diào)整元素的透明度,更多精彩內(nèi)容,請往下看...
在 jq 中有四種方法可以讓元素執(zhí)行一個淡入淡出的效果,如下所示:
fadeIn()fadeOut()fadeToggle()fadeTo()
下面開始對每一個方法進行一個詳細的說明:
1.fadeIn()
這個方法會讓已經(jīng)隱藏的元素淡入...和 show.hide類似,可以沒有參數(shù),也可以有1個或者2個參數(shù).參數(shù)1是動畫執(zhí)行的時間,可選 slow.fast.或者毫秒時間.第二個參數(shù)是動畫執(zhí)行完畢的回調(diào)函數(shù).
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. //回調(diào)函數(shù)會改變這個元素的 text 和 css.
25. $(this).text("我是fadeIn 出來的,呵呵噠!").css("height","200px");
26. });
27. })
28. })
29. </script>
30.</html>
2.fadeOut()
和上面的方法是相反的,這個方法會將已經(jīng)顯示的元素淡出.淡入淡出的原理其實就是改變了這個元素的透明度,前者是0到1,后者是從1到0
1.//這段代碼演示的是如何使用 fadeOut()來動畫隱藏一個已經(jīng)存在的元素.
2.$("#danchu").click(function(){
3. $(".content_two").fadeOut("slow",function(){
4. //回調(diào)函數(shù)會改變這個元素的 text 和 css.
5. $(this).text("我是fadeOut 出去的,呵呵噠!").css("height","200px");
6. });
7.})
和上面的方法剛好是相反的,其實也是很簡單的啦...
3.fadeToggle().
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
和 show().hide()這兩個方法的 toggle()是一樣的.就是在兩個狀態(tài)之間進行取反操作.
廢話不多說,直接上代碼
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()
這個方法很容易就可以聯(lián)想到是設(shè)置什么東西,然后我們想到了 fade 動畫的原理其實就是設(shè)置一個元素透明度.但是默認的的方法會將元素從0->1或者是從1->0這樣變化的.使用 fadeTo()我們多了一個參數(shù),我們可以設(shè)置透明度的值!我們可以自定義元素的動畫結(jié)束的時候,元素的透明值是多少.真的是爽歪歪.
廢話不多說,直接看代碼:
1.//下面這段代碼的意思就當點擊 button的時候改變 div1,2,3的透明度,分別設(shè)置了0.15,0.4,0.7.
2.//可以看出來這個fadeTo()這個方法可以設(shè)置3個參數(shù),分別是動畫執(zhí)行的事件,透明度的數(shù)值.以及最后動畫執(zhí)行完畢的回調(diào)函數(shù).
3.$("button").click(function(){
4. $("#div1").fadeTo("slow",0.15);
5. $("#div2").fadeTo("slow",0.4);
6. $("#div3").fadeTo("slow",0.7);
7.});
結(jié)束:關(guān)于淡入淡出的動畫的方法寫到了這里就算是結(jié)束了...這一節(jié)的 B 裝完了,撒花鼓掌,退朝~
