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