[英]jQuery: Dynamic Elements with Timers to fadeOut
I have a basic message system on my site that will queue/append messages into a div that floats at top of page. 我的网站上有一个基本的消息系统,它将消息排队/附加到浮动在页面顶部的div中。 Each message should fade out after X amount of seconds but if you hover over that message is will pause it's fade out time, then on mouseleave it should resume.
每条消息应在X秒钟后消失,但如果将鼠标悬停在该消息上将暂停,则其消失时间将消失,然后在鼠标离开时恢复。
So I'm trying to append a div and attach a timer to it to fade out, but upon mouseneter it will pause that fade out and upon mouseleave it will resume it. 因此,我尝试添加一个div并为其添加一个计时器以使其淡出,但在mouseneter上,它将暂停该淡出,而在mouseleave上,它将恢复它。 Also there is a close button that will instantly make it disappear.
还有一个关闭按钮,将立即使其消失。
I've tried delay()
but there is no way to control it and I cannot seem to wrap my head around using setTimeout()
to do it because I can't figure how to attach the timer to that div created. 我已经尝试过
delay()
但是没有办法控制它,而且似乎无法使用setTimeout()
来解决问题,因为我不知道如何将计时器附加到创建的div上。
You need to add the timer ids to an object in the global scope, like window.timers
, and on mouseover, you iterate over all the active timers, clearTimeout()
on them and save a timeRemaining
value - which is difference from the DOM ready timestamp and that mouseover event's timestamp. 您需要将计时器id添加到全局范围内的对象(例如
window.timers
,并且在鼠标悬停时,对所有活动计时器进行迭代,将它们window.timers
clearTimeout()
并保存timeRemaining
值-与DOM准备就绪的区别时间戳和该鼠标悬停事件的时间戳。 On mouseout, you set all the timers again with the timeRemaining
value instead of the initial time value. 鼠标移出时,将所有计时器重新设置为
timeRemaining
值,而不是初始时间值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.