css - jquery animateで外部ダイブの端に当たったときにdivの動きを止める

Question

画像を含む div があり、ユーザーが 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