Javascript 使用.animate和.mouseover使元素出现/消失

我正在学习JavaScript和jQuery，在做下面的练习时，我遇到了一个问题。 我在页面的右侧有一个div，其中包含另一个较小的div，其中包含一个带有一些img的无序列表，我只想在鼠标指针进入第一个div时显示

问题是，当鼠标指针进入第一个div时，较小的div开始无法控制地上下移动

我已经尝试在较大的div上使用.is（：hover）方法，正如关于SO的另一个问题所建议的那样，但没有任何帮助

这是我的密码：

stato=“out”；
$（“#控件”）.mouseover(
函数（）{
如果（stato=“输出”）
$（“#社交箱”）。制作动画({
top:300
});
//$（“#socialBox”）.show（）；
stato=“in”；
}
);
$（“#控制”）.mouseleave(
函数（）{
$（“#社交箱”）。制作动画({
前-500名
});
//$（“#socialBox”）.hide（）；
stato=“out”；
}
);
正文{
背景：浅蓝色；
}
img{
高度：50px；
宽度：50px；
}
保险商实验室{
列表样式类型：无；
}
#控制{
位置：固定；
右：0px；
顶部：0px；
身高：100%；
宽度：100px；
背景：黄色；
}
#社交箱{
位置：固定；
顶部：-500px；
右：0px；
宽度：75px；
背景：红色；
}







X

触发该行为是因为“#socialBox”进入视图，然后阻止鼠标指针和“#control”之间的“路径”，因此脚本触发mouseleave事件

首先，摆脱鼠标移动。。。使用mouseenter可以删除stato变量

接下来，将“#control”div环绕在“#socialbox”上，如下所示：








X

如前所述，您需要将
社交框
包装在
控件
div内

socialBox
未绑定到父div



stato=“out”；
$（“#控件”）.mouseover(
函数（）{
如果（stato=“输出”）
$（“#社交箱”）。制作动画({
排名：0
});
//$（“#socialBox”）.show（）；
stato=“in”；
}
);
$（“#控制”）.mouseleave(
函数（）{
$（“#社交箱”）。制作动画({
前-500名
});
//$（“#socialBox”）.hide（）；
stato=“out”；
}
);
正文{
背景：浅蓝色；
}
img{
高度：50px；
宽度：50px；
}
保险商实验室{
列表样式类型：无；
}
#控制{
位置：固定；
右：0px；
顶部：0px；
身高：100%；
宽度：100px；
背景：黄色；
}
#社交箱{
位置：固定；
顶部：-500px；
右：0px；
宽度：75px；
背景：红色；
}







X

问题在于，动画的
\socialBox
未嵌套到
\control
中。无论使用哪个鼠标事件，只要动画框位于光标下方，光标就会“离开”控件，从而触发隐藏动画

如果要保持标记的原样，可以使用计时器延迟动画。在我下面的解决方案中，如果
#control mouseleave
和
#socialBox mouseenter
（反之亦然）几乎同时触发，则计时器确保不会执行动画

我还在动画之前调用了
.stop（）
，以避免移动鼠标过快而使多个动画排队


var显示=false；
无功定时器；
功能触发（显示）{
清除超时（计时器）；
计时器=设置超时（函数（）{
//如果我们已经处于相同的状态，则无需设置动画
如果（显示===显示）返回；
//制作社交箱动画
$（“#socialBox”）.stop（）.animate（{top:show？300:-500}）；
//切换状态
显示=！显示；
}, 10);
}
$（“#控制，#社交箱”）
.mouseenter（函数（）{triggerAnimation（true）；}）
.mouseleave（function（）{triggerAnimation（false）；}）
body{背景：浅蓝色；}
img{高度：50px；宽度：50px；}
ul{列表样式类型：无；}
#控件{位置：固定；右侧：0px；顶部：0px；高度：100%；宽度：100px；背景：黄色；}
#社交框{位置：固定；顶部：-500px；右侧：0px；宽度：75px；背景：红色；}







X

TL；DR：将您的
socuialBox
div移动到
content
div中

完整解释：
问题完全是因为事件冒泡

首先，您的html需要更改，因为
socialBox
div不在
控件的范围内
div即使在使用
mouseenter
和
mouseleave
时，事件也会重复触发。因此，
socialBox
被移动到
control
div中，并使用
mouseenter
和
mouseleave
事件

第二，事件正在冒泡。由于事件冒泡，问题仍然出现在第一步之后

鼠标悬停-当鼠标指针移动到元素中时触发。当移动到子元素上时，子元素的事件被激发，事件气泡导致父元素的
mouseover
被激发

mouseout-与
mouseover
相同，但在离开元素时触发

mouseenter-仅当鼠标指针进入事件所绑定的元素时触发。事件不会有泡沫

mouseleave-与
mouseenter
相同，但在将事件绑定到元素时触发

了解
<div id="control">
  <div id="socialBox">
    <ul>
      <li><img id="cane" src="img/cane.jpg" /></li>
      <li><img id="gatto" src="img/gatto.jpg" /></li>
      <li><img id="koala" src="img/koala.jpg" /></li>
      <li><img id="mucca" src="img/mucca.jpg" /></li>
      <li><img id="panda" src="img/panda.jpg" /></li>
      <li id="nascondi"> X </li>
    </ul>
  </div>
</div>