jQuery animate()动画触发两次问题的修复方法咨询

看起来你遇到的问题是因为mouseover/mouseout事件的冒泡特性导致的——如果#cryptobox是#cryptosmart的子元素，当鼠标从父元素移到子元素上时，会触发父元素的mouseout，接着又触发子元素的mouseover，同时父元素的mouseover也可能被再次触发，最终导致动画和样式修改被重复执行，出现“下移→上移→又下移”的奇怪现象。

修复步骤： #

1. 替换事件类型：把mouseover换成mouseenter，mouseout换成mouseleave。这两个事件不会因为子元素的交互而触发父元素的事件，只会在鼠标真正进入/离开元素本身时执行一次。
2. 简化重复代码：把多个重复的br元素隐藏操作合并，让代码更简洁。

修改后的代码： #

// 合并隐藏br的操作，更简洁
$("#p1, #p12, #p13").find("br").css("display","none");

// 使用mouseenter/mouseleave替代mouseover/mouseout
$("#cryptosmart").mouseenter(function() {
  $("#cryptobox").animate({top: "1403.5px"});
  $("#cryptopass").css("top","1591.5px");
}).mouseleave(function() {
  $("#cryptobox").animate({top: "1201px"});
  $("#cryptopass").css("top","1389px");
});

$("#cryptobox").mouseenter(function() {
  $("#cryptopass").css("top","1591.5px");
}).mouseleave(function() {
  $("#cryptopass").css("top","1389px");
});

额外建议： #

如果动画执行时还有队列问题（比如快速多次触发导致动画排队），可以在animate前加上.stop(true, true)来清空之前的动画队列，确保每次只执行最新的动画：

$("#cryptobox").stop(true, true).animate({top: "1403.5px"});

stop(true, true)的第一个参数表示清空动画队列，第二个参数表示立即完成当前动画，这样就不会出现动画堆积的情况了。

内容的提问来源于stack exchange，提问作者Hugo Barbér