Question

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 alert 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?

Answer 1

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/