1 <!-- fadeIn() 淡入 2 fadeOut() 淡出 3 fadeToggle() 切换淡入淡出 4 5 hide() 隐藏元素 6 show() 显示元素 7 toggle() 切换元素的可见状态 8 9 slideDown() 向下展开 10 slideUp() 向上卷起 11 slideToggle() 依次展开或者卷起某个元素 --> 12 13 <!DOCTYPE html> 14 <html lang="en"> 15 <head> 16 <meta charset="UTF-8"> 17 <title>Document</title> 18 <style type="text/css"> 19 .box{ 20 height: 300px; 21 width: 300px; 22 background-color: gold; 23 margin: 50px auto 0; 24 } 25 #btd{ 26 border: o; 27 text-align: center; 28 } 29 </style> 30 <script type="text/javascript" src="../jquery-1.12.4.min.js"></script> 31 <script type="text/javascript"> 32 $(function(){ 33 var $btn = $("#btn"); 34 $btn.click(function(){ 35 // $('.box').fadeOut(); 36 37 // $('.box').fadeOut(2000,'swing',function(){ 38 // alert('动画'); 39 // }); 40 41 // $('.box').fadeToggle(2000,'swing',function(){ 42 // alert('动画'); 43 // }); 44 45 // $(".box").hide(); 46 // $(".box").show(); 47 // $('.box').toggle(); 48 49 $('.box').slideToggle(2000); 50 }); 51 }); 52 </script> 53 </head> 54 <body> 55 <input type="button" name="" value="动画" id="btn"> 56 <div class="box"></div> 57 </body> 58 </html>