I've got a jQuery animation that I want to start when the page loads. Here's my code:

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 takes a long strip of photos and 'scrolls' it to the right, then back to the left.

As you can see, it is called on $(document).ready().

This works fine with browsers that aren't IE. But, with IE, there's a problem.

When the page loads in IE, the alert('in') is called. But, repeatscroll() isn't called until 20000 ms later, exactly the time the animation is set to take. I know that repeatscroll() isn't getting called because I've tried putting an al开发者_如何学编程ert line at the top of it, which isn't called until after the delay.

jsFiddle example

So, why does IE wait to start the animation, and how can I fix this?

In IE8 and lower this:

$('div#photoscroll img').css('margin-left')

returns auto the first time, whereas in other browsers (including IE9), it returns 0px as expected.

One way to fix it is to add this CSS:

#photoscroll img {
    margin: 0
}

See: http://jsfiddle.net/XJu3W/1/