jQuery: анимация установлена ​​для загрузки страницы; IE ждет длину анимации перед началом

Question

У меня есть анимация jQuery, которую я хочу запустить при загрузке страницы.Вот мой код:

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();});

Это занимает длинную полосу фотографий и «прокручивает» ее вправо, затем обратно влево.
Как видите, он вызывается на $(document).ready().

Это прекрасно работает с браузерами, которые не IE.Но с IE возникает проблема.

Когда страница загружается в IE, вызывается alert('in').Но repeatscroll() не вызывается до 20000 мс позже, как раз то время, которое требуется для анимации.Я знаю, что repeatscroll() не вызывается, потому что я пытался поместить строку alert вверху, которая вызывается только после задержки.

jsFiddle пример

Итак, почему IE ждет запуска анимации и как я могу это исправить?

Answer 1

В IE8 и ниже это:

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

возвращает auto в первый раз, тогда как в других браузерах (включая IE9) он возвращает 0px, как ожидалось.

Один из способов исправить это добавить этот CSS:

#photoscroll img {
    margin: 0
}

См .: http://jsfiddle.net/XJu3W/1/