1

我正在使用 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>
4

3 回答 3

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。

于 2011-11-21T22:38:48.307 回答
0

我们需要知道您页面的 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);
});
});
于 2011-11-21T22:37:06.967 回答
0

如果我们可以看到您的一些 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?

于 2011-11-21T22:37:09.947 回答