1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>自定义简单动画</title> 8 <meta name="author" content="Administrator" /> 9 <script type="text/javascript" src="script/jquery-1.12.2.js"></script> 10 <style type="text/css"> 11 #panel { 12 position: absolute; 13 width: 100px; 14 height: 100px; 15 border: 1px solid #0050D0; 16 background: #96E555; 17 cursor: pointer; 18 } 19 </style> 20 <!-- Date: 2016-03-29 --> 21 </head> 22 <body> 23 <div id="panel"></div> 24 <script type="text/javascript"> 25 $(function() { 26 var flag = true; 27 $("#panel").bind("click", (function() { 28 if (flag) { 29 $(this).animate({ 30 left : "500px" 31 }, 3000); 32 flag = false; 33 } else { 34 $(this).animate({ 35 left : "10px" 36 }, 3000); 37 flag = true; 38 } 39 })); 40 }); 41 </script> 42 </body> 43 </html>