Internet Explore 8 не изменит изображение src с помощью .attr()

Я установил страницу, которая будет пролистывать последовательность изображений, когда пользователь прокручивает их мышью или трекпадом. Я использую jQuery для измерения расстояния от верхней части страницы - scrollTop() - чтобы затем изменить источник изображения для определенного идентификатора в DOM.

Это отлично работает в Firefox, Chrome, Safari, Opera, IE9, а также на iPad, iPhone и т.д. ОДНАКО, он не работает в IE8.

Это HTML:

<div id="flipping-container">
    <img id="flipping-id" class="flippingTarget" src="imageOne.png" alt="imageone" />
</div>

Это JS:

$(document).scroll(function() {
    var toTop = $(document).scrollTop();
    if (toTop <= 340) {
            $('.flippingTarget').attr('src','imageOne.png');
    }
    else if ((toTop <= 392) && (toTop > 341)){
            $('.flippingTarget').attr('src','imageTwo.png');
    }
    else if ((toTop <= 445) && (toTop >= 393)){
            $('.flippingTarget').attr('src','imageThree.png');
    }

// AND SO ON
// ENDING WITH...

    else {
            $('.flipping-target').attr('src','image1.png');
    };
});

Идентификатор div "flipping-container" присваивается значение CSS позиции: fixed; поэтому он всегда виден.

Я выложил сообщения StackOverflow и пока не нашел рабочего решения. Значение scrollTop() читается отлично, поскольку я нажимаю события на кнопках, которые плавно прокручивают страницу до div и/или нескольких пикселей сверху. IE8 в порядке с этим, так что это не проблема html/body/document/window scrollTop().

Я отключил значение .attr() для .addClass(), чтобы узнать, будет ли он выбран. Но это не в IE8. Поэтому он не может быть напрямую связан с самим атрибутом src. Я дважды проверял имена и цели классов, и они все в порядке (также проверенные другими браузерами, как и предполагалось).

Любые подсказки? Любая помощь будет высоко оценена.

Ответы