jQuery學習筆記第五節/Jq的效果之顯示隱藏

1.顯示和隱藏

其實就是 show()方法和 hide()方法,通過這兩個方法就可以顯示和隱藏一個元素.這個是最簡單的一個動畫效果.

重要:
這兩個方法默認是沒有參數的,但是也是可以傳遞參數的.一共有2個參數,第一個是動畫的持續時間,可選slow.fast.或者是數字,單位毫秒.第二個參數是回調函數.就是當動畫執行完畢之后可以執行另一個函數.

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

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

2.toggle()方法

這個方法可以切換一個元素的狀態,點擊的時候可以隱藏再點擊的時候可以顯示,就是在兩個狀態中取反.如果一個元素是隱藏的就讓他顯示,如果是顯示的就讓他隱藏.

1.//toggle.可以很清晰的看到,當點擊 button 的時候,下面的 div 調用 toggle 方法就可以在顯示和隱藏兩個狀態下進行切換了.
2.  $("#toggle_button").click(function(){
3.         $("#toggle_div").toggle(function(){
4.             alert("misson complate!");
5.         });
6.    })

注意
這個方法也是可以有參數的,可以設置動畫的持續時間和執行完畢的回調函數.見下圖:

toggle方法的使用介紹.png

關于JQ的最簡單的一個動畫效果就是這個樣子的,更多動畫見下一節.see you...