jquery - 如何在jquery中使用$(this).closest()

Question

我有一个 jquery 代码，可以在悬停图像时为 div 制作动画。它工作正常，但问题是我有多个具有相同类的图像和 div，并且动画同时发生在所有图像中。

我需要这个脚本在每个图像/div 中单独工作。如果我将鼠标悬停在第一张图像上，那么只有“first div”应该被动画化。

用 fiddle 观看: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;
}

Answer 1

使用 closest 是正确的方法，因为如果您的 HTML 略有变化(例如您更改元素的顺序或放置中间包装元素)，它仍然可以工作，这就是您不这样做的原因t 使用 parent() 或 next()。使用方法如下:

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