尝试按照我想要的方式进行简单的淡入淡出/淡入淡出工作,基本上,我的问题是它不会覆盖或停止该功能,如果我将鼠标悬停在触发该操作的另一个元素上,并且它有点将其放入队列中,并播放所有动画,即使我的鼠标甚至不靠近元素。我希望它不要让函数再次触发,除非淡出已经完成。
$("p").hover(
function()
{
$(document.getElementById('Bottom_Menu')).fadeIn(200);
},
function()
{
$(document.getElementById('Bottom_Menu')).fadeOut(350);
});
最佳答案
要快速回答您的问题,您可以使用 stop()
。
$("#Bottom_Menu").stop().fadeTo(200, 1);
您不必使用document.getElementById
;相反,只需使用#id。对于类,请使用 .class。这一切都内置于 jQuery 中。 :)
更新
我现在使用 fadeTo
而不是 fadeIn
,因为 fadeIn
仅在 display 为 none 时有效。因此,如果我们使用 stop()
取消之前的动画,我们需要使用 fadeTo
,因为显示可能不是 none。 (当您使用 fadeOut
时,它会淡出元素,完成后,会将元素的显示设置为无,从而隐藏元素。)
注意事项:
fadeTo
的第二个属性是不透明度。
fadeTo
,与 fadeIn
一样,仍然会自动更改显示属性,使元素可见。
关于Javascript 淡入/淡出 "stacking",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20927758/