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>