javascript - (jQuery) .hover() 中淡入/淡出元素的问题

Question

我在尝试让 .fadeIn()、.fadeOut() 和 .hide() 正常工作时遇到问题当元素悬停在上方时正确。

假设我有一个容器，.post-box。

.post-box 包含两个 div:.description 和 .quote。 .quote div 最初是隐藏的，因此当 .post-box 悬停在上面时，它会淡入并取代 .description div，通过 .hide() 隐藏。

当 .post-box 悬停时，.quote 淡出，.description 再次淡入。

$(document).ready(function() {
    var description = $('.description');
    var quote = $('.quote');
    var postBox = $('.post-box');

    postBox.hover(function() {
        $(this).find(description).clearQueue().stop(true, true).hide(0, function() {
            quote.fadeIn(300);
        });
    }, function() {
        $(this).find(quote).clearQueue().stop(true, true).fadeOut(300, function() {
            description.fadeIn(300);
        });
    });
});

除了一个问题之外，我似乎已经把这个概念发挥得相当好。如果您快速将鼠标悬停在 .post-box 上，快速将鼠标悬停在上面，然后再次快速悬停在上面，您就会看到 .quote 和 .description 同时显示 (see example screenshot here) .

我以为我是根据我的函数设置方式阻止它们同时触发的，但我一定错过了一些重要的事情才能发生。

Here is my fiddle so you can see it in action.

有人可以引导我走向正确的方向吗？

Answer 1

我的猜测是还清除悬停时引用元素的动画队列。

$(this).find(quote).clearQueue().stop(true, true).hide();

I've updated the fiddle accordingly 。