Javascript /fadeOut“堆栈”

Question

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

$("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只在显示为none时才能工作。因此，如果我们取消以前的stop()动画，我们需要使用fadeTo，因为显示可能不是零。(当您使用fadeOut时，它会淡出元素，当元素完成时，它会将元素的显示设置为none，这将隐藏元素。)

备注：

fadeTo的第二个性质是不透明度。fadeTo和fadeIn一样，仍然会自动更改display属性，以便元素是可见的。

Answer 2

$("#Bottom_Menu").clearQueue();

清除要对此元素执行的所有挂起的动画/操作。