Question

我正在使用jQuery向用户显示一些通知，这些通知将使用jQuery append方法显示在屏幕上。一旦它们出现在屏幕上，我想等待5秒，然后慢慢开始淡化元素，然后从DOM中删除它。它应该只在5秒后开始消退并且不会立即开始消退。如果用户悬停元素，那么它应该将元素淡入，然后当用户移除悬停时，它应该开始逐渐淡出。

到目前为止，我有这个：

        setTimeout(function()
            {
                $(".Notification").fadeOut("slow", function ()
                {
                    $(this).remove();
                });

            }, 5000);

所以这会在超时之后淡出元素，但是当用户将元素徘徊时，如何将其淡出。当用户移除悬停时，它将再次淡出（注意：我们不需要每次他们悬停元素时再等待反转淡出，除非它到达淡入淡出的末尾并被移除）

有人可以帮忙吗？我认为这只是一个简单的例子，用一些额外的代码包装fadeOut部分，但我很挣扎，并希望得到一些帮助。

此外，他们可能会在页面上显示多个通知，因此他们都需要根据自己在屏幕上的外观淡出并且不会同时淡出它们。

实际上，这是模仿您在使用Microsoft Outlook时在屏幕右下角看到的新邮箱。

由于

Answer 1

实际上，您不需要setTimeout。 jQuery有动画的.delay（）函数。

/* Initial delay and fading out for 5s */
$(".Notification").delay(5000).fadeOut(5000);

/* If hover, stop the ongoing (or delayed) fadeout, and fadein fast */
$(".Notification").mouseenter(function(){

    $(this).stop(true, false).fadeIn(500);
});

/* If mouseout, set the element to fadeout slowly after 5s */
$(".Notification").mouseleave(function(){

    $(this).delay(5000).fadeOut(5000);
});

我没有尝试过这个实际的例子，但是这样的事情应该这样做。

Answer 2

将setTimeout指定给变量。当用户将鼠标悬停在该变量上时，调用clearTimeout。

jQuery在间隔上缓慢淡化元素，如果用户悬停则淡入淡出

2 个答案: