一定要吃透jQuery API
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <title>jQuery动画移动效果</title> <style type="text/css"> span{ position:absolute; width:80px; height:80px; border: solid 1px #ccc; margin:100px 100px; background-color: Red; vertical-align:middle } </style> </head> <body> <h3>动画移动</h3> <span></span> <input type="button" id="btnleft" value="左移"><br/> <input type="button" id="btnright" value="右移"> <div id="yd">执行开始</div> <script type="text/javascript"> $(function(){ $("#btnleft").bind("click",function(){ $("span").animate({ left:"-=50px" },3000,function(){ $("#yd").html("左移50px"); }) }); $("#btnright").bind("click",function(){ $("span").animate({ left:"+=50px" },3000,function(){ $("#yd").html("右移50px"); }) }); }); </script> </body> </html>
这里有两个问题:1记得开头引入Jquery库,2去查看API左移右移都是用left来实现