JQuery slider, strange performance after tab change
I've created a slider with JQuery but now a strange perfo开发者_StackOverflow社区rmance appear after a tab change in Firefox and Chrome.
If you change the tab and go back there are more boxes opens or the slider change fast and without any logic... or many many other strange things.
So I realy dont know what's the problem of firefox and chrome :D
Can someone help me or someone has ANY idea why this happens?
Ok Guys I've found the Answer to this question after a while:
In JQuery 1.6.2 they implemented the new "requestAnimationFrame". But this donsnt work very well at the moment and produce the "animation worm holes" like I describe in my question here!
In JQuery 1.6.3 they removed this API and now it works fine again ;)
Here is the Bug-Ticket: http://bugs.jquery.com/ticket/9381
Kind Regards Raphael
The Problem is that the different animations are not in sync. You should work on making subsequent animations as callbacks! JavaScript does not have a SLEEP thing to it. As soon as it gets a call for a function, it tries to execute it. But when you are away from a window/tab, the browser takes away much of the processing powers from the inactive tab to provide better power to the new current tab. Although, a stack of the functions called on the inactive tab is maintained and as soon as the tab regains the processing power, the stack is emptied as soon as possible. (this is the reason that the page comes back to normal functionality in a few seconds)
The problem comes from the fact that while you're not focused on the window, the rolling animation of the image does not occur. They all occurs when you're getting the focus back.
Adding stop in the rotate call seems to help.
$(".image_roll").stop(true, true).animate({
left: -image_rollPosition
}, 1200, 'easeInOutQuart');
However I'm not very familiar with all the animate / stop functions of jQuery, so there might be some other stuff to change. (It seems that the change I indicated is doing a little bug when the focus goes back on the window, but imho it's still better than before).
See http://jsfiddle.net/fc7Xc/104/ for the example.
精彩评论