<html> <head> <title></title> </head> <style> *{ margin:0; padding:0; } div{ width:300px; height:300px; background:red; display:none; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('button').eq(0).click(function(){ //$('button')是获取到所有的button数组,eq(0)代表第一个button //$('div').slideDown(1000) //slideDown(1000),是表示从上往下滑出来,1000代表滑出整个需要的时间,单位是毫秒,可自行设置时间 $('div').show(1000) //show(1000),是从一个点动画出来,1000也是显示整个div所需的时间,单位是毫秒 }) $('button').eq(1).click(function(){ //$('div').slideUp(1000) //同上slideDown(),slideUp是表示从下往上滑到无 $('div').hide(1000) //同上show(),hide()是隐藏起来的动画 }) $('button').eq(2).click(function(){ //$('div').slideToggle(1000) //slideToggle(),当div隐藏时点击,触发的是slideDown(),div显示时点击,触发的是slideUp $('div').toggle(1000) //toggle(),当div隐藏是点击,触发show(),div显示触发的是hide() }) }) </script> <body> <button>显示</button> <button>隐藏</button> <button>切换</button> <div> </div> </body> </html>
效果图