jQuery: Dynamic Elements with Timers to fadeOut

Question

I have a basic message system on my site that will queue/append messages into a div that floats at top of page. 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.

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. 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.

Answer 1

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. On mouseout, you set all the timers again with the timeRemaining value instead of the initial time value.