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