Upon loading my page, a jQuery animation should start automatically. Here's the code snippet responsible:
function repeatscroll() {
if ($('div#photoscroll img').css('margin-left') == '0px') {
var margin = '-770px';
} else {
var margin = '0px';
}
$('div#photoscroll img').animate({'margin-left': margin}, 20000, 'linear', function() {repeatscroll();});
}
$(document).ready(function() {alert('in');repeatscroll();});
This script effectively scrolls through a series of images stored in a long strip from right to left and then back again.
It is triggered by $(document).ready().
Unfortunately, this functionality works seamlessly on non-IE browsers. However, there seems to be an issue with Internet Explorer.
When the page loads in IE, the alert('in') prompt displays instantly. However, the repeatscroll() function doesn't kick in until exactly 20000 milliseconds later, which matches the duration set for the animation. I verified that repeatscroll() isn't being invoked promptly by adding an alert line at the beginning of the function, which only triggers after the delay.
Check out this jsFiddle example
Why does IE postpone the start of the animation and what can be done to rectify it?