Jquery动画单个div

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);
});
}); 

这个链接有一个类似的问题:如何获得$(This)选择器的子元素?