jQuery學(xué)習(xí)筆記第五節(jié)/Jq的效果之顯示隱藏

1.顯示和隱藏

其實(shí)就是 show()方法和 hide()方法,通過(guò)這兩個(gè)方法就可以顯示和隱藏一個(gè)元素.這個(gè)是最簡(jiǎn)單的一個(gè)動(dòng)畫效果.

重要:
這兩個(gè)方法默認(rèn)是沒(méi)有參數(shù)的,但是也是可以傳遞參數(shù)的.一共有2個(gè)參數(shù),第一個(gè)是動(dòng)畫的持續(xù)時(shí)間,可選slow.fast.或者是數(shù)字,單位毫秒.第二個(gè)參數(shù)是回調(diào)函數(shù).就是當(dāng)動(dòng)畫執(zhí)行完畢之后可以執(zhí)行另一個(gè)函數(shù).

1.<script type="text/javascript">
2.   $(function(){
3.     //顯示
4.       $(".button_show").click(function(){
5.             $("p").show("slow",function(){
6.                   $(this).text("我出來(lái)啦...");
7.              });
8.         })
9.       //隱藏
10.       $(".button_hide").click(function(){
11.             $("p").hide("slow",function(){
12.                   $(this).text("我不見(jiàn)啦...");
13.             });
14.        })
15.   })
16.</script>

通過(guò)代碼我們可以很清晰看到這兩個(gè)方法是如何使用的.很直觀.

2.toggle()方法

這個(gè)方法可以切換一個(gè)元素的狀態(tài),點(diǎn)擊的時(shí)候可以隱藏再點(diǎn)擊的時(shí)候可以顯示,就是在兩個(gè)狀態(tài)中取反.如果一個(gè)元素是隱藏的就讓他顯示,如果是顯示的就讓他隱藏.

1.//toggle.可以很清晰的看到,當(dāng)點(diǎn)擊 button 的時(shí)候,下面的 div 調(diào)用 toggle 方法就可以在顯示和隱藏兩個(gè)狀態(tài)下進(jìn)行切換了.
2.  $("#toggle_button").click(function(){
3.         $("#toggle_div").toggle(function(){
4.             alert("misson complate!");
5.         });
6.    })

注意
這個(gè)方法也是可以有參數(shù)的,可以設(shè)置動(dòng)畫的持續(xù)時(shí)間和執(zhí)行完畢的回調(diào)函數(shù).見(jiàn)下圖:

toggle方法的使用介紹.png

關(guān)于JQ的最簡(jiǎn)單的一個(gè)動(dòng)畫效果就是這個(gè)樣子的,更多動(dòng)畫見(jiàn)下一節(jié).see you...