如何将jquery动画应用于单个项目

How to apply a jquery animation to a single item?

本文关键字：应用于 单个 项目 动画 jquery      更新时间：2023-09-26

我不知道我的措辞是否正确，但当你悬停在一个项目上时，我正试图用jquery来摇动它。我成功地做到了，但每当你悬停在整行上时，它就会摇动。我希望它只在你悬停在图像上时抖动。

这是HTML:

<div class="top-logo" align="center">
    <span class="fa fa-magic fa-5x" aria-hidden="true"></span>
</div>

javascript：

$('.top-logo').hover(function(){
  if(!$(this).hasClass('animated'))
  {
      $(this).addClass('animated');
      $(this).stop().effect('shake', {distance:3}, 200);
  }
}, function(){
  $(this).removeClass('animated');
});

以下是完整的代码：http://codepen.io/l-emi/pen/QNZevb

我试着使用display:inline-block，它有效，但在我希望魔杖居中时将其向左移动。

谢谢你的帮助！

替换

$('.top-logo')

通过

$('.top-logo span')

$('.top-logo').hover(function(){
    $(this).toggleClass('animated');
    $("span", this).stop().effect('shake', {distance:3}, 200);
});

$("span", this)或$(this).find("span")应该会有所帮助，因为您正试图将其子级"span" 作为目标

相关文章：