移動的問題？
<!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">
? ? ? ? ? ? div{
? ? ? ? ? ? ? ? ?width:40px;
? ? ? ? ? ? ? ? ?height:40px;
? ? ? ? ? ? ? ? ?margin:10px;
? ? ? ? ? ? ? ? ?left:100px;
? ? ? ? ? ? ? ? ?border:2px solid;
? ? ? ? ? ? ? ? ?background:blue;
? ? ? ? ? ? ? ? ?position:absolute;
? ? ? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? </style>
? ? </head>
? ??
? ? <body>
? ??
? ? ? ?<input type="button" value="左移" id="left"/>
? ? ? ?<input type="button" value="右移" id="right"/>
? ? ? ?<div></div>
? ? ? ?<span></span>
? ? ?<script type="text/javascript">
? ? ? ? $(function(){
? ? ? ? ? ? $("#left").bind("click",function(){
? ? ? ? ? ? ? ? $("div").animate({
? ? ? ? ? ? ? ? ? ? left:"+=50"
? ? ? ? ? ? ? ? },3000)
? ? ? ? ? ? });
? ? ? ? ? ?$("#right").bind("click",function(){
? ? ? ? ? ? ? ? $("div").animate({
? ? ? ? ? ? ? ? ? ? left:"-=50"
? ? ? ? ? ? ? ? },3000)
? ? ? ? ? ? });
? ? ? ? }) ?
? ? ? ?</script>
? ? </body>
</html>
在
?$("#right").bind("click",function(){
? ? ? ? ? ? ? ? $("div").animate({
? ? ? ? ? ? ? ? ? ??left:"-=50"
? ? ? ? ? ? ? ? },3000)
中為什么把“l(fā)eft”改成“right”右移的效果就沒有了呢？求解答？謝謝！
2016-04-09
因為你沒有在CSS里設(shè)置初始的right值，你把CSS里的left改成right，第一次右移就生效了。但是左移之后右移就會失效的。因為在一個元素設(shè)置了top和left值之后，bottom和right就無效了。