1

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

我需要这个脚本在每个图像/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;
}
4

1 回答 1

4

使用closest是正确的方法，因为如果您的 HTML 稍有变化（例如您更改元素的顺序或放置中间包装元素），它仍然可以工作，这就是您不使用parent()or的原因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);
    }); 
});
于 2013-10-21T14:50:30.430 回答