Question

我正在尝试为我的网站构建一个投资组合部分，其中当项目名称悬停时背景图像淡入淡出，当光标离开项目名称时淡出。这很好用，但是我面临的问题是，当我快速地从一个项目名称转移到另一个项目名称时，“鼠标中心”＃39;正在触发事件，而“老鼠”则会被触发。事件仍在运行，等待动画完成。

有没有办法阻止“鼠标中心”？在“小鼠离开”时被触发的事件＆＃39;事件仍然在运行？

我设置了一个codepen，但它无法正常工作，这是一个codepen限制吗？我full code is available on Github（需要Jekyll和Gulp）。

以下是我正在使用的代码：

$('#barba__wrapper').on('mouseover', '.portfolio__link', function(event) {
  var currentImage = $('.portfolio__image--current');
  var portfolioImg = $(this).parent().data('img');
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  currentImage.css('background-image', 'url('+ portfolioImg +')');
  currentImage.addClass('animated fade-in').one(animationEnd, function() {
   currentImage.removeClass('animated fade-in');
  });
});

$('#barba__wrapper').on('mouseleave', '.portfolio__link', function(event) {
  var currentImage = $('.portfolio__image--current');
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  currentImage.addClass('animated fade-out').one(animationEnd, function() {
    currentImage.css('background-image', '');
    currentImage.removeClass('animated fade-out');
  });
});

感谢您的时间！：）

防止在另一个正在运行时执行事件

0 个答案: