用箭頭鍵添加移動div的限制

Question

嗨我已添加功能（在stackoverflow上找到），使我的div向左或向右移動，一旦用戶按住其中一個箭頭鍵。所有的作品都應該如此。

我想知道有沒有辦法阻止div移動一旦到達「結束」，或者一旦它移動了一定數量的像素。

代碼我有低於

$(document).keydown(function(e) { 
switch (e.which) { 
case 37: 
    $('#block').stop().animate({ 
     left: '-=50' 
    }); //left arrow key 
    break; 

case 39: 
    $('#block').stop().animate({ 
     left: '+=50' 
    }); //right arrow key 
    break; 

} 
}) 

Answer 1

獲取當前offset，然後處理：

var max = 1000; 

$(document).keydown(function(e) { 
    switch (e.which) { 

     case 37: 
      if($('#block').offset().left > 50) 
      { 
       $('#block').stop().animate({ left: '-=50' }); 
      } 
      break; 

     case 39: 
      if($('#block').offset().left < (max - 50) 
      { 
       $('#block').stop().animate({ left: '+=50' }); 
      } 
      break; 

    } 
}); 

Answer 2

當然，看看這個小提琴：http://jsfiddle.net/ArtBIT/V7qcK/

var KEY = { 
    LEFT: 37, 
    RIGHT: 39 
} 
var boundaries = { 
    left: 0, 
    right: 200 
} 
$(document).keydown(function(e) { 
    var position = $('#block').position(); 

    switch (e.which) { 
    case KEY.LEFT: 

     $('#block').stop().animate({ 
      left: Math.max(boundaries.left, position.left - 50) 
     }); 
     break; 

    case KEY.RIGHT: 
     $('#block').stop().animate({ 
      left: Math.min(boundaries.right, position.left + 50) 
     }); 
     break; 
    } 
});​ 

或者這一個用於2D運動的http://jsfiddle.net/ArtBIT/8PWCR/1/