Javascript 淡入/淡出 "stacking"

Question

尝试按照我想要的方式进行简单的淡入淡出/淡入淡出工作，基本上，我的问题是它不会覆盖或停止该功能，如果我将鼠标悬停在触发该操作的另一个元素上，并且它有点将其放入队列中，并播放所有动画，即使我的鼠标甚至不靠近元素。我希望它不要让函数再次触发，除非淡出已经完成。

$("p").hover(
function() 
{
    $(document.getElementById('Bottom_Menu')).fadeIn(200);
},
function() 
{
    $(document.getElementById('Bottom_Menu')).fadeOut(350);
});

Answer 1

要快速回答您的问题，您可以使用 stop()。

$("#Bottom_Menu").stop().fadeTo(200, 1);

您不必使用document.getElementById；相反，只需使用#id。对于类，请使用 .class。这一切都内置于 jQuery 中。 :)

更新

我现在使用 fadeTo 而不是 fadeIn，因为 fadeIn 仅在 display 为 none 时有效。因此，如果我们使用 stop() 取消之前的动画，我们需要使用 fadeTo，因为显示可能不是 none。 (当您使用 fadeOut 时，它会淡出元素，完成后，会将元素的显示设置为无，从而隐藏元素。)

注意事项:

fadeTo 的第二个属性是不透明度。fadeTo，与 fadeIn 一样，仍然会自动更改显示属性，使元素可见。