（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 div （請參見此處的示例屏幕截圖） 。

我以為我是根據功能的設置來阻止它們同時觸發的，但是我必須錯過一些重要的事情才能實現。

這是我的小提琴，因此您可以在實際中看到它。

有人可以引導我朝正確的方向前進嗎？

Answer 1

我的猜測是還要在懸停時清除quote元素的動畫隊列。

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

我已經相應地更新了小提琴 。