显示隐藏
1、显示：show()，参数----毫秒值、slow（600ms）、 normal（400ms）、 fast（200ms）
2、隐藏：hide()，参数-----毫秒值、slow（600ms）、 normal（400ms）、 fast（200ms）
3、回调函数：show(2000,function(){})、hide(2000,function(){})
4、切换：toggle()
5、控制属性：width、height、opacity、display
滑入滑出
1、滑入：slideDown()，参数----毫秒值、slow（600ms）、 normal（400ms）、 fast（200ms）
2、滑出：slideUp()，参数-----毫秒值、slow（600ms）、 normal（400ms）、 fast（200ms）
3、回调函数：slideDown(2000,function(){})、slideUp(2000,function(){})
4、切换：slideToggle()
5、控制属性：height、display
淡入淡出
1、淡入：fadeIn()，参数----毫秒值、slow（600ms）、 normal（400ms）、 fast（200ms）
2、淡出：fadeOut()，参数-----毫秒值、slow（600ms）、 normal（400ms）、 fast（200ms）
3、回调函数：slideDown(2000,function(){})、slideUp(2000,function(){})
4、切换：fadeToggle()
5、指定透明度：fadeTo(1000,0.5,,function(){})
6、控制属性值：display、opacity
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.11.1.js"></script> <style> .box1 { width: 600px; height: 600px; border: 1px solid #ccc; margin-right: 10px; position: relative; } .box2 { width: 150px; height: 150px; background-color: red; position: absolute; right: 0; bottom: 0; display: none; } </style> <script src="jquery-1.11.1.js"></script> <script> $(function () { $("button").click(function () { $(".box2").slideToggle(); }); }); </script> </head> <body> <button>滑入</button> <div class="box1"> <div class="box2"></div> </div> </body> </html>