使用jQuery实现图片悬停循环动画：解决再次悬停失效问题

你的代码存在两个核心问题：

1. 每次触发mouseenter时都会重复绑定mouseleave事件，多次绑定后会导致事件逻辑混乱。
2. 仅用dequeue()无法彻底清除动画队列并终止递归的loop函数，再次悬停时旧队列的残留会干扰新动画的运行。

修正后的代码如下：

// 提前绑定mouseleave事件，避免重复绑定
$(".right-section img").mouseleave(function() {
  $(this).stop(true, true); // 停止所有动画、清空队列并跳转到动画结束状态
  $(this).css({ bottom: "" }); // 重置元素位置
});

$(".right-section img").mouseenter(function() {
  const $img = $(this);
  
  function loop() {
    $img.animate({ bottom: "15px" }, 500)
        .animate({ bottom: 0 }, 500, loop);
  }
  
  loop();
});

关键调整说明：

• 将mouseleave事件绑定从mouseenter内部移出，确保每个图片只绑定一次离开事件。
• 使用stop(true, true)：第一个true清空所有待执行的动画队列，第二个true让当前动画直接跳转到结束状态，彻底终止递归的loop调用。
• 用$img缓存当前图片的jQuery对象，避免重复DOM选择，提升性能。

修改后，鼠标悬停时动画会正常循环，离开时立即停止并重置位置，再次悬停时动画能重新正常启动。

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