Перемещение изображения randomaly внутри DIV

Question

Это мой код:

<style type="text/css"> 
    #box 
    { 
     width: 400px; 
     height: 400px; 
     border: 1px solid; 
     cursor: none; 
    } 
     #Parachute 
    { 
    width: 25px; 
    height: 25px; 
    cursor: none; 
    position: absolute; 
    } 
    </style> 
    <script type="text/javascript"> 
     $("#StartGame").click(function() { 
      animateDiv(); 


     }); 

     function makeNewPosition() { 

      // Get viewport dimensions (remove the dimension of the div) 
      var h = $("#box").height() - 25; 
      var w = $("#box").width() - 25; 

      var nh = Math.floor(Math.random() * h); 
      var nw = Math.floor(Math.random() * w); 

      return [nh, nw]; 

     } 

     function animateDiv() { 
      var newq = makeNewPosition(); 
      $('#Parachute').animate({ top: newq[0], left: newq[1] }, function() { 
       animateDiv(); 
      }); 

     }; 

    <script> 
    <centre> 
    <div id="box"> 
     <img id="Parachute" src="Parachute.gif" width="25px" height="25px" /> 
    </div> 
    <centre> 
    <input type="button" id="StartGame" value="Start Game" /> 

изображение не движется, что я делаю неправильно?

Answer 1

Вам нужно установить положение IMG, как абсолютное:

#Parachute{position:absolute} 

Или анимировать margin-top, margin-left

http://jsfiddle.net/KyNDm/

Answer 2

Вам нужно настроить CSS ... Положения изображения должен быть установлен в absolute, поскольку вы используете левый и верхний:

#Parachute 
{ 
    width: 400px; 
    height: 400px; 
    border: 1px solid; 
    cursor: none; 
    position: absolute; 
} 

без изменения CSS вы можете также изменить JS для:

$('#Parachute').animate({ 'margin-top': newq[0], 'margin-left': newq[1] }, function() { 
    animateDiv(); 
}); 

для того, чтобы получить желаемый результат.