Question

我希望用户将鼠标悬停在一个链接上，该链接有一个名为picture的类和一个动画范围（增加填充顶部），这是我到目前为止所做的代码，但当用户将鼠标悬停在它上面时，它会为它们设置动画所有，我只想让它为用户悬停的动画制作动画。

$('.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

您不需要迭代所有元素，您可以同时将事件处理程序绑定到所有匹配的元素。

另外，使用$('span', this)从悬停元素中选择正确的<span>。

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

Answer 2

我认为您的外部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)，然后执行动画。

Answer 3

这最终有效：

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

当我尝试使用on（）的示例时，我遇到了一个控制台错误，这与我之前没有看到过的完全相同？

无论如何，谢谢。

Answer 4

您不需要each。

$('.picture').on('mouseenter mouseleave', function(e){
    var padding = e.type == 'mouseenter' ? '20px' : '10px';
    $('span', this).animate({
        'padding-top' : padding
    },'fast');
});

将鼠标悬停在每个上方

4 个答案: