(jQuery）在 .hover(） 中淡入/淡出元素的问题

我在尝试让.fadeIn()、.fadeOut()和.hide()在将元素悬停在上面时正常运行时遇到问题。

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

.post-box包含两个div：.description和.quote。.quotediv 最初是隐藏的，因此当.post-box悬停在 上时，它会淡入并取代.descriptiondiv，后者与 .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 和 .descriptiondiv(请参阅此处的示例屏幕截图(。

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

这是我的小提琴，所以你可以看到它的实际效果。

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