为什么div不能移动？

Question

<style>

 div {  
      width:200px;
      height:200px; 
      border:1px solid green;
      margin-left:500px;
      margin-top:100px;
      }  
 hr{   border:1px solid red;   }

</style>

<div id="aa">这是div</div>

---

<script>

  var timer;
  var n=10;
  function  moveStep(){        
  $('#aa').left-=20px;
      n--;
     if(n==0){
     clearInterval(timer);
     }
  }
timer=setInterval(moveStep,  1000);
$('#aa').click(function{
     moveStep();      
  }
);

</script>

Answer 1

需要给div加一个属性position:absolute或者是relative

Answer 2

元素位置计算错误
使用相对于document的位置 offset方法
或相对于offsetParent的位置 position方法

var timer;
var n=10;
var orgOffsetLeft;
function  moveStep(){
    var currentLeft=$('#aa').offset().left;
    $('#aa').offset({
        left:currentLeft-20
    });
    n--;
    if(n==0){
        clearInterval(timer);
    }
}

//记录原始位置，点击后恢复到开始位置，重新开始移动
$('#aa').click(function(){
    if(!orgOffsetLeft){
        orgOffsetLeft=$('#aa').offset().left;
    }else{
        $('#aa').offset({
            left:orgOffsetLeft
        });
    }
    timer&&clearInterval(timer);
    timer=setInterval(moveStep,  100);
    //moveStep();

    }
);

Answer 3

使left属性生效，需要给元素加加入 position:absolute或者是position:relative

Answer 4

添加position属性
同时

Answer 5

JQ有$().left();这个方法嘛。。？样式不是你这么玩的吧？要用函数的话用.offset吧。

Answer 6

需要增加position:absolute的属性