jQuery中自定义简单动画的实现

时间：2023-03-09 03:15:48
jQuery中自定义简单动画的实现 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>自定义简单动画</title>

         <meta name="author" content="Administrator" />

         <script type="text/javascript" src="script/jquery-1.12.2.js"></script>

         <style type="text/css">

             #panel {

                 position: absolute;

                 width: 100px;

                 height: 100px;

                 border: 1px solid #0050D0;

                 background: #96E555;

                 cursor: pointer;

             }

         </style>

         <!-- Date: 2016-03-29 -->

     </head>

     <body>

         <div id="panel"></div>

         <script type="text/javascript">

             $(function() {

                 var flag = true;

                 $("#panel").bind("click", (function() {

                     if (flag) {

                         $(this).animate({

                             left : "500px"

                         }, 3000);

                         flag = false;

                     } else {

                         $(this).animate({

                             left : "10px"

                         }, 3000);

                         flag = true;

                     }

                 }));

             });

         </script>

     </body>

 </html>

相关文章