Question

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

我需要这个脚本在每个image / div中单独工作。如果我将第一张图像悬停，那么只需要对“firt 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;
}

Answer 1

使用closest是正确的方法，因为如果您的HTML略有变化（例如您更改元素的顺序或放置中间包装元素）它仍然有效，这就是您不使用{的原因{1}}或parent()。以下是您可以使用它的方法：

next()

如何在jquery中使用$（this）.closest（）

1 个答案: