Question

当用户将鼠标悬停在具有animated fadeIn类的div上时，我正在尝试插入project-title-wrapper。我只希望它们悬停的实例发生变化。

我当前的代码是：

$(function() {
    var animationName = 'animated fadeIn';
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    $('.project-title-wrapper').on('hover', function() {
        $('.project-title-wrapper').addClass(animationName).one(animationEnd, function() {
            $(this).removeClass(animationName);
        });
   });
});

这不起作用。

我也尝试过：

$(function() {
    var animationName = 'animated fadeIn';
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    $('.project-title-wrapper').hover(function() {
        $('.project-title-wrapper').addClass(animationName).one(animationEnd, function() {
            $(this).removeClass(animationName);
        });
    });
});

但是，这会改变每个实例

预先感谢

Answer 1

使用$(this)会将类应用于所悬停的项目。尚不清楚您为什么然后听animationEnd，因为您的代码中没有任何东西会触发任何动画。

$(function() {
  var animationName = 'animated fadeIn';
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

  $('.project-title-wrapper').hover(function() {
    $(this).addClass(animationName).one(animationEnd, function() {
      $(this).removeClass(animationName);
    });

  });

});

.project-title-wrapper {
  height: 100px;
  border: 1px solid black;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-title-wrapper">
  one
</div>

<div class="project-title-wrapper">
  two
</div>

Answer 2

尝试使用this关键字仅获取悬停的实例。

$('.project-title-wrapper').hover(function() {
    $(this).addClass(animationName).one(animationEnd, function() {
        $(this).removeClass(animationName);
    });
});

我也将.hover方法更改为更简单的.on('mouseenter')，因为在.hover和mouseenter上都使用了mouseout方法触发器当用户停止悬停时也会添加该类（当用户将鼠标悬停在某物上，暂停直到动画结束然后再悬停在下一件事上时，会导致一些有趣的行为）。

此外，由于我看不到不断绑定和解除绑定animationEnd处理程序的原因，因此我将其编写为：

$('.project-title-wrapper').on(animationEnd, function() {
    $(this).removeClass(animationName);
}).on('mouseenter', function() {
    $(this).addClass(animationName);
});

$(function() {
    var animationName = 'animated fadeIn';
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    $('.project-title-wrapper').on(animationEnd, function() {
        $(this).removeClass(animationName);
    }).on('mouseenter', function() {
        $(this).addClass(animationName);
    });
});

.project-title-wrapper {
  background-color: #060;
  height: 3em;
  opacity: 0.5;
}

.project-title-wrapper.animated.fadeIn {
  animation-duration: 1s;
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from {
    background-color: #060;
    opacity: 0.5;
  }

  to {
    background-color: #0D0;
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-title-wrapper">First</div>
<div class="project-title-wrapper">Second</div>
<div class="project-title-wrapper">Third</div>

悬停时未插入类名

2 个答案: