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

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

---

1.显示和隐藏

其实就是 show()方法和 hide()方法,通过这两个方法就可以显示和隐藏一个元素.这个是最简单的一个动画效果.

重要:
这两个方法默认是没有参数的,但是也是可以传递参数的.一共有2个参数,第一个是动画的持续时间,可选slow.fast.或者是数字,单位毫秒.第二个参数是回调函数.就是当动画执行完毕之后可以执行另一个函数.

1.

通过代码我们可以很清晰看到这两个方法是如何使用的.很直观.

---

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