jQuery在淡出期间停止淡入淡出

Question

我有这段代码on my site：

$(".name").hover(
    function() { $(".kyle_hover").stop(true, true).fadeIn('slow'); },
    function() { $(".kyle_hover").stop(true, true).fadeOut('slow'); }
);

但是我有大约4个这些在彼此之上，它们是隐藏的并且在悬停时出现并且在按预期离开时消失，但是.stop方法没有做我想要的。

当你快速将鼠标悬停在标题上时，它们会叠加在一起（因为它们内置于HTML中）但是我想在开始下一个动画之前完成动画，我是否误解了停止？

Quick fiddle

感谢。

Answer 1

是的，你似乎误解了它。 stop()不会清除所有动画的队列，它只会停止正在调用的确切元素上的动画。因此，调用$(".kyle_hover").stop()将停止此特定元素的动画，但如果将鼠标悬停在$("#gallery")上，其动画将独立触发。

在您的特定情况下，我只是绝对地定位淡入/淡出元素，以便它们不会叠加在另一个上面。淡入/淡出看起来会更令人满意，并且您的jQuery代码不需要任何更改。