1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery动画特效</title> 6 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 7 <style> 8 div{ 9 position:absolute; 10 top:50px; 11 left:200px; 12 height:50px; 13 50px; 14 border:1px solid red; 15 } 16 </style> 17 </head> 18 <body> 19 <div></div> 20 <input id="leftmove" type="button" value="左移"/> 21 <input id="rightmove" type="button" value="右移"/> 22 <script type="text/javascript"> 23 $(function(){ 24 $ltime=0; 25 $rtime=0; 26 $("#leftmove").bind("click",function(){//绑定元素事件 27 $ltime++; 28 $("div").animate({//调用animate制作移动动画 29 left:'-=50px' 30 },600,function(){ 31 $("div").html("左移"+$ltime+"次!"); 32 }); 33 }); 34 $("#rightmove").bind("click",function(){ 35 $rtime++; 36 $("div").animate({ 37 left:'+=50px' 38 },600,function(){ 39 $("div").html("右移"+$rtime+"次!"); 40 }); 41 }); 42 }); 43 </script> 44 </body> 45 </html>