5.jQuery学习笔记第五节/Jq的效果之显示隐藏

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...