JQuery mouseenter/mouseleave异常：动画交替生效失效问题排查

你的问题核心出在toggleClass的误用以及动画类未及时清理、状态未正确衔接上：

1. 在mouseenter和mouseleave事件中使用toggleClass，第一次触发时添加动画类，动画正常执行；第二次触发时该类已存在，toggleClass会移除它，导致动画不执行，进而出现"正常一次后失效，再执行又恢复"的循环。
2. 动画执行结束后对应的类未被移除，且两个动画类未做互斥处理，会导致后续动画的初始状态混乱。

修改后的解决方案 #

1. 调整jQuery代码（核心修改）

$(document).ready(function(){

  $('.round-w').show();
  $('.round-w').on({
    mouseenter: function(){
      // 先移除离开动画类，避免样式冲突
      $(this).removeClass('pulse-offAnim').addClass('pulseAnim');
      // 动画结束后移除当前类，确保下次触发时能重新执行
      $(this).one('webkitAnimationEnd animationEnd', function(){
        $(this).removeClass('pulseAnim');
      });
    },
    mouseleave: function(){
      // 移除进入动画类，保证状态衔接正确
      $(this).removeClass('pulseAnim').addClass('pulse-offAnim');
      // 动画结束后清理类
      $(this).one('webkitAnimationEnd animationEnd', function(){
        $(this).removeClass('pulse-offAnim');
      });
    },
    click: function(){
      $('.round-w').fadeOut(200);
      $('.round-b').addClass('block').addClass('My-animIn');
      // 点击动画结束后清理类
      $('.round-b').one('webkitAnimationEnd animationEnd', function(){
        $(this).removeClass('My-animIn');
      });
    }
  });

  $('.round-b').click(function(){
    $('.round-b').removeClass('block').fadeOut(200);
    $('.round-w').fadeIn(200);
  });

});

2. 优化CSS动画类（状态衔接）

给动画类添加animation-fill-mode: forwards，让元素保持动画结束后的状态，保证离开动画能从进入动画的结束状态开始：

.pulseAnim {
  animation: pulse 0.4s ease-in-out forwards;
  -webkit-animation: pulse 0.4s ease-in-out forwards;
}

.pulse-offAnim {
  animation: pulse-off 0.4s ease-in-out forwards;
  -webkit-animation: pulse-off 0.4s ease-in-out forwards;
}

修改说明 #

• 用addClass替代toggleClass：确保每次鼠标进入/离开都能主动添加动画类，彻底解决交替失效的问题。
• 动画结束后清理类：通过one监听动画结束事件，只执行一次清理操作，避免重复绑定导致的异常，保证下次触发时类处于未添加状态。
• 互斥移除类：触发一个动画前先移除另一个动画的类，避免两个动画类同时存在导致的样式冲突。
• animation-fill-mode: forwards：让元素保留动画最后一帧的状态，确保离开动画的初始状态与进入动画的结束状态一致，动画衔接更流畅。

内容的提问来源于stack exchange，提问作者Marco Calcinelli