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>
