将鼠标悬停在每个

Question

我希望用户将鼠标悬停在一个链接上，该链接有一个名为图片的类和要动画的跨度（增加填充顶部），这是我到目前为止所做的代码，但是当用户将鼠标悬停在它上面时，它会对它们进行动画处理，我只希望它对用户悬停在其上的动画进行动画处理。

$('.picture').each(function(){
    $('.picture').hover(function(){
        $('.picture span').animate({
            'padding-top' : '20px'
        },'fast');
    });

    $('.picture').mouseout(function(){
        $('.picture span').animate({
            'padding-top' : '10px'
        },'fast');
    });
});

任何帮助将不胜感激，我认为它在每个功能的某个地方出了问题，但我不确定。可以在这里找到它的链接： http: //bathroomsyork.co.uk/

Answer 1

我看不出你的外部each()调用有任何好处。你应该尝试这个：

$('.picture').hover(
    function() {
        $(this).find('span').animate({'padding-top' : '20px'},'fast');
    },
    function() {
        $(this).find('span').animate({'padding-top' : '10px'},'fast');
    }
);

请注意，我们选择所有图片类元素，然后使用hover()函数的两个参数来指定mouseenter和mouseleave事件回调。

在每个回调中，获取当前悬停元素的子跨度，$(this)并执行动画。