jquery element positioning problem

Question

can someone please tell me why my code below doesn't work? Code below should move my div to the left when pressing down the left arrow key and moving to the right when pressing down the right arrow key. Thanks

 <html>                                                                  
 <head> 
<style type="text/css">
  #movingdiv {   color: #00FF00;
  font-family:arial;
  font-size: 18pt; left: 50px; width: 220px; background-color: yellow;}
</style>                                                                 
 <script type="text/javascript" src="jquery-1.5.2.min.js"></script>          
 <script type="text/javascript">                                         
   $("*").keydown(function(e) {
  if(e.keyCode == 37) { // left arrow key
    $("#movingdiv").animate({
      left: "-=900"
    });
  }
  else if(e.keyCode == 39) { // right arrow key
    $("#movingdiv").animate({
      left: "+=900"
    });
  }
});                                
 </script>                                                               
 </head>                                                                 
 <body>                                                                  
   <div id="movingdiv">sdfsdfsdf</div>                                    
 </body>                                                                 
 </html>

Answer 1

尝试添加position:absolute;

Answer 2

You need to add positioning CSS to the div:

position: absolute; left: 50px;

http://jsfiddle.net/Canuteson/XZt98/

jquery element positioning problem

Question

2 answers

solution1
3 ACCPTED 2011-04-19 13:19:05

solution2
0 2011-04-19 13:23:37

jquery element positioning problem

Question

2 answers

solution1 3 ACCPTED 2011-04-19 13:19:05

solution2 0 2011-04-19 13:23:37

solution1
3 ACCPTED 2011-04-19 13:19:05

solution2
0 2011-04-19 13:23:37