jquery - jQuery悬停动画在数组中的单个元素上

Question

我有一个结果数组，所有结果都具有在结果列表中重复多次的相同类。我已经设置了一个 jQuery 悬停动画，当您将鼠标悬停在其中一个结果上时会发生，但是目前当我将鼠标悬停在一个结果上时，动画会发生在所有结果上。

这是我的 jQuery 代码：

jQuery(document).ready(function() {
    jQuery(".hover").hover(
        function(){
            jQuery(".agent").animate({top: '-=32px'},300, 'easeOutBack');
            jQuery(".fav").delay(150).animate({top: '-=32px'},300, 'easeOutBack');
            jQuery(".more_details").delay(300).animate({top: '-=32px'},300, 'easeOutBack');
        },
        function(){
            jQuery(".agent,.fav,.more_details").animate({top: '+=32px'},150);
    }
    );                              
});

是否可以在我的数组中挑出一个项目，让动画出现在悬停的项目上？

谢谢

Answer 1

假设具有类的元素hover是其余元素的父元素，则将当前对象作为上下文传递给 selector。

jQuery(document).ready(function() {
    jQuery(".hover").hover(
        function(){
            jQuery(".agent", this).animate({top: '-=32px'},300, 'easeOutBack');
            jQuery(".fav", this ).delay(150).animate({top: '-=32px'},300, 'easeOutBack');
            jQuery(".more_details", this).delay(300).animate({top: '-=32px'},300, 'easeOutBack');
        },
        function(){
            jQuery(".agent,.fav,.more_details").animate({top: '+=32px'},150);
    }
    );                              
});