jquery - jqueryで$(this).closest()を使用する方法

Question

画像にカーソルを合わせたときに div をアニメーション化する jquery コードがあります。正常に動作しますが、問題は、同じクラスの複数の画像と div があり、アニメーションがすべての画像で同時に発生することです。

各画像/ divで個別に動作するには、このスクリプトが必要です。最初の画像にカーソルを合わせると、「最初の div」だけがアニメーション化されます。

フィドルを見る: http://jsfiddle.net/chefnelone/77K8r/1/

html:

    <div class="main-wrapper">

<div class="rel-wrap">
    <img src="http://placekitten.com/g/920/300" width="920" height="300" class="my-img">
    <div class="my-div">
        first div
    </div>
</div>

<div class="rel-wrap">
    <img src="http://placekitten.com/g/920/300" width="920" height="300" class="my-img">
    <div class="my-div">
        second div
    </div>
</div>

js:

$(document).ready(function(e) {
    $('.my-img').mouseenter(function(){
        $('.my-div').animate({left: '0px'}, 1000);
    });
    $('.rel-wrap').mouseleave(function(){
        $('.my-div').delay( 1000).animate({left: '-940px'}, 1000);
    }); 
});

CSS:

.rel-wrap {
    position:relative;
    width:920px;
    height:300px;
    border: solid 1px #ccc;
}

.my-div{
    position: absolute;
    background: red;
    width: 920px;
    height: 300px;
    left: -940px;
    top: 0px;
}