jQuery——動畫效果
阿新 • • 發佈：2017-12-13
cit itl eight 回調函數 tro nor {} () abs
顯示隱藏
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>
jQuery——動畫效果