javascript - jQuery：带有定时器的动态元素淡出

Question

我的网站上有一个基本的消息系统，它将消息排队/附加到浮动在页面顶部的 div 中。每条消息应该在 X 秒后淡出，但是如果你将鼠标悬停在该消息上，它会暂停它的淡出时间，然后在 mouseleave 上它应该恢复。

所以我试图附加一个 div 并附加一个计时器来淡出，但是在 mouseneter 上它会暂停淡出，而在 mouseleave 上它会恢复它。还有一个关闭按钮会立即使其消失。

我已经尝试过delay()，但没有办法控制它，我似乎无法用setTimeout()它来做这件事，因为我不知道如何将计时器附加到创建的那个 div 上。

Answer 1

您需要将计时器 id 添加到全局范围内的对象中，例如window.timers，并且在鼠标悬停时，您遍历所有活动的计时器，clearTimeout()在它们上并保存一个timeRemaining值 - 这与 DOM 就绪时间戳和鼠标悬停事件的时间戳不同。timeRemaining在 mouseout 上，您再次使用该值而不是初始时间值设置所有计时器。