(jQuery) .hover() 中 in/out 元素的淡化问题

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 div 同时显示时间 (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。

(jQuery) .hover() 中 in/out 元素的淡化问题

(jQuery) Issue with fading in/out elements within .hover()

javascript

queue

jquery

fadeout

fadein