So verhindern Sie, dass ein bewegliches Zeichen vom Bildschirm verschwindet

Question

Ich habe derzeit ein Objekt, das ich mit den Pfeiltasten auf der Tastatur bewegen kann, das Objekt bewegt sich jedoch vom Bildschirm weg. Wie kann ich erreichen, dass das Objekt auf dem Bildschirm bleibt?

$(document).ready(function(){ 

    $(document).keydown(function(key) { 
     switch(parseInt(key.which,10)) { 
      case 37: 
       $('img').animate({left: "-=30px"}, 'fast'); 
       break; 
      case 38: 
       $('img').animate({top: '-=30px'},'fast'); 
       break; 
      case 39: 
       $('img').animate({left: '+=30px'},'fast'); 
       break; 
      case 40: 
       $('img').animate({top: '+=30px'},'fast'); 
       break; 
     } 
    }); 
}); 

Answer 1

Fiddle

ich die Animation entfernt habe, weil während der Animation, Position(). Gibt links e, um den gleichen alten Wert und left Positionswert erst nach Animation aktualisiert wird. In diesem Fall kann sich das Bild trotz vorhandenem Code aus dem Fenster bewegen. Wenn Sie eine Animation benötigen, sollten Sie sich eine Timeout-Funktion vorstellen.