jQuery实现移动和渐变特效的点击事件

时间：2021-03-11 10:05:45|栏目：jquery|点击：次

先看代码：

 
 <!DOCTYPE html>
 
 <html>
 
     <head>
 
         <meta charset="utf-8">
 
         <title></title>
 
         <script src="js/jquery.js"></script>
 
     </head>
 
 <style>
 
 body{font-family: "微软雅黑";width: 980px; margin: 0 auto; text-align: center;}
 
     .box{
 
         width: 300px;
 
         height: 300px;
 
         background: green;
 
         border: 1px solid #e6e6e6;
 
         margintop: 50px;
 
         line-height: 200px;
 
         position: absolute;
 
     }
 
 button{
 
     border: none;
 
     background: green;    
 
     width: 100px;
 
     height: 50px;
 
     line-height: 50px;
 
     color: #fff;
 
     font-size: 16px;
 
     margin-top: 50px;
 
     }
 
 </style>
 
     <body>
 
         <button>点击开始动画</button>
 
         <div class="box" ></div>
 
         <script> 
 
             $(document).ready(function(){
 
               $("button").click(function(){
 
                 var div=$(".box");
 
                 div.animate({height:'200px',opacity:'0.4'},"slow");
 
                 div.animate({width:'200px',opacity:'0.8'},"slow");
 
                 div.animate({height:'100px',opacity:'0.4'},"slow");
 
                 div.animate({width:'100px',opacity:'0.8'},"slow");
 
                 div.animate({right:'100px',opacity:'0.8'},"slow");
 
                 div.animate({bottom:'100px',opacity:'0.8'},"slow");
 
                 div.animate({left:'100px',opacity:'0.8'},"slow");
 
                 div.animate({top:'100px',opacity:'0.8'},"slow");
 
               });
 
             });
 
         </script> 
 
         <script>
 
             $(document).ready(function(){
 
                 $("button").click(function(){
 
                     var div=$(".box");
 
                         div.animate({height:'300px',opacity:'0.4'},"slow");
 
                         div.animate({width:'300px',opacity:'0.8'},"slow");
 
                         div.animate({height:'100px',opacity:'0.4'},"slow");
 
                         div.animate({width:'100px',opacity:'0.8'},"slow");
 
                     });
 
                 });
 
             });
 
         </script>
 
     </body>
 
 </html>