以上代码不可以左移,而是需要把{ right: "+=50px" }改成{ left: "-=50px" }才能左移动,请指教?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动画特效</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style type="text/css">
div{border:1px solid #0094ff;width:100px;height:90px;background-color:#00ff90;position:relative;}
</style>
<script type="text/javascript">
$(function () {
$("#btn1").bind("click", function () {
$("div").animate({ right: "+=50px" }, "3000", function () {
$("span").html("左移执行完毕!");
})
});
$("#btn2").bind("click", function () {
$("div").animate({ left: "+=50px" }, "3000", function () {
$("span").html("右移执行完毕!");
})
});
});
</script>
</head>
<body>
<span></span>
<br />
<input type="button" id="btn1" value="左移" />
<input type="button" id="btn2" value="右移" />
<div>box</div>
</body>
</html>
以上代码不可以左移,而是需要把{ right: "+=50px" }改成{ left: "-=50px" }才能左移动,不知原因在哪。