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的元素是元素其余元素的父元素，则将当前对象作为context in 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);
    }
    );                              
});

jQuery将悬停动画放在数组中的单个元素上

1 个答案: