當用jquery annimate撞到外部潛水的邊緣時停止div移動

Question

我有一個帶有圖像的div，並希望用戶在div內移動它，但我不希望它離開div。 作爲股利移動它還是會去的父區域的div外搬過來，我不要了頁面的其餘部分要

這裏用到我的風格

<style> 
#area{ 
    width: 500px; 
    height: 500px; 
    margin: auto; 
    clear: both; 
    background-color: red; 
    position: absolute; 
} 
#one{ 
    width: 29px; 
    height: 29px; 
    background-image: url("images/fighter.png"); 
    position: relative; 
    top: 50px; 
} 

button{ 
    float: left; 
    width: 50px; 
} 
.gameControls{ 
    margin: auto; 
    width: 150px; 
} 
.gameUp{ 
    margin: 0 0 0 50px; 
} 
.clear{ 
    clear: both; 
} 

這裏是我的jQuery腳本中使用

<script> 
    $(document).ready(function(){ 
     $('.gameUp').click(function(event){ 
      $("#one").animate({"top": "-=50px"}, "slow"); 
     }); 
     $('.gameLeft').click(function(event){ 
      $("#one").animate({"left": "-=50px"}, "slow"); 
     }); 
     $('.gameDown').click(function(event){ 
      $("#one").animate({"top": "+=50px"}, "slow"); 
     }); 
     $('.gameRight').click(function(event){ 
      $("#one").animate({"left": "+=50px"}, "slow"); 
     }); 
    }); 
</script> 

而我的身體碼

<div class="gameControls"> 
    <button class="gameUp">&uarr;</button> 
    <div class="clear"></div> 
    <button class="gameLeft">&larr;</button> 
    <button class="gameDown">&darr;</button> 
    <button class="gameRight">&rarr;</button> 
</div> 
<div id="area"> 
<div id="one"></div> 
</div> 

Answer 1

我不確定它只能使用css來完成，因爲top，margin，padding等可以賦值爲負值。

這是我的js的解決方案：

jsfiddle