I recently created a quick jQuery gallery plugin for a client that auto scrolls using
setInterval and, when I was done, I left my tab hidden for a few minutes to look at something on another website. When I went back to my tab with the gallery, WHAM! I was stuck with a gallery automatically scrolling in rapid section, all crazy and nonsensical. I knew that jQuery 1.6.1 is now using the more efficient requestAnimationFrame to animate the transitions, but this behavior was totally unexpected.
I looked into the
fadeIn documentation and found this little surprise.
Because of the nature of
requestAnimationFrame(), you should never queue animations using a
The documentation suggests using the animation callbacks or the jQuery
.queue() function on the element I’m fading in, but that wouldn’t really work with my gallery set up because I wanted to stop the automatic scrolling when a user interacts with the gallery. I didn’t want to mess with booleans to do the behavior, especially since everything was working how I wanted it to already.
To use them, you have to include the first shim for
requestAnimFrame from Mr. Irish, then include the shims for (set/clear)Interval and/or (set/clear)Timeout. In my case, I just needed the ones for setInterval and clearInterval. Then, where you were calling
setInterval(func, poll), you now call
requestInterval(func, poll). Where you call
clearInterval(interval), you now call
Hope that helps you out!