<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>执行动画效果</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <style type ="text/css">div{ left:150px; position:absolute; width:80px; height:80px; border: solid 1px #ccc; margin: 0px 8px; background-color: Red; color:White; vertical-align:middle} </style> </head> <body> <h3>执行动画效果</h3> <span> <input id="left" type="button" value="左移" /> <input id="right" type="button" value="右移" /> </span> <div id="tip"></div> <script type="text/javascript"> $(function() { $("#left").bind("click", function(){ $("div").animate({ left:"-=50px" }, 1000, function () { $("#tip").html("左移执行完成!"); }); }); $("#right").bind("click", function() { $("div").animate({ left:"+=50px" }, 1000, function () { $("#tip").html("右移执行完成!"); }); }); } </script> </body></html>
- 1 回答
- 1 关注
- 1238 浏览
添加回答
举报
0/150
提交
取消