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 {{1} 3}}

我认为我根据我的功能设置方式阻止他们同时开火，但我必须错过一些重要的事情。

(see example screenshot here)

有人可以带领我朝着正确的方向前进吗？

Answer 1

我的猜测是在hover时清除quote元素的动画队列。

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

I've updated the fiddle accordingly。

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

1 个答案: