Question

我正在使用div类.item_wrap的多个实例，当图像类.item悬停时会改变高度。

目前，以下脚本在鼠标悬停时为div类的所有实例设置动画。有没有办法只有当前悬停的div动画，而没有其余动画同时？ ^^;

$(document).ready(function(){
    $(".item").hover(
        function(){
            $('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
        },    
        function(){
            $('.item_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
        }
    );
});

html：

<div class="item_wrap">
<a href="images/burgundyholographicgoldsequin.jpg" class="item"  title="image">
<img src="images/burgundyholographicgoldsequin.jpg" width="250" height="192" /></a>
<div class="item_text">Text here</div>
</div>

Answer 1

假设每个项目与item_wrap具有相似的关系（例如item_wrap是每个项目的父项），那么您可以使用相对于this的选择器。

$(document).ready(function(){
    $(".item").hover(
        function(){
            $(this).parent('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
        },    
        function(){
            $(this).parent('.shopitem_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
        }
    );
});

这个，当然，取决于你的HTML。

Answer 2

我们需要知道您网页的HTML，但一般来说，如果我们假设

<div class="item">
    <div class="item_wrap"></div>
</div>

然后我会将您的代码更改为

$(document).ready(function(){
$(".item").hover( function(){
$(this).children('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
},    
function() {
$('.shopitem_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
});
});

Answer 3

如果我们能够看到您的某些HTML，会更容易，但您希望将this与.itemwrap div

一起使用

例如：

$(document).ready(function(){
$(".item").hover( function(){
$('.item_wrap', this).animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
},    
function() {
$('.shopitem_wrap', this).stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
});
});

此链接有类似的问题：How to get the children of the $(this) selector?

Jquery动画单个div

3 个答案: