Анимация jQuery не работает в IE8 и ранее

Вот мой сайт: http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm

Он отлично работает в firefox, chrome, safari и ie9, но не работает в IE8 и 7.

Когда вы щелкните изображение, которое оно расширяется. Когда вы нажимаете на другое изображение, все расширенные изображения сжимаются. Я думаю, что это вторая часть jQuery, вызывающая проблемы. В IE8 и 7 анимация попадает в нужное место, но все изображения прыгают раньше.

Вот код:

    $(".image-div").click(function () {


        var divRefTwo = $(".image-div").not(this);
        $(".image-div").not(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 400, function() {
                $(divRefTwo).css('z-index','1');
            });

        if ($(this).css('z-index') == 1) {
            $(this).css('z-index','2');
            $(this).animate({
                width: '500px',
                left: '-125px',
                marginRight: '-250px',
                backgroundPosition: '0px'
            }, 500, function() {
                //
            });
        }
        else {
            var divRef = this;
            $(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 500, function() {
                $(divRef).css('z-index','1');
            });
        }

    });

Есть ли у кого-нибудь идеи, почему это происходит? Его довольно сложно отладить, поскольку проблема возникает только во время работы анимации.

Спасибо

ОБНОВЛЕНИЕ - Я пытался добавить условные операторы, чтобы запускать анимацию (которая сжимает расширенные элементы) только при необходимости, но в этом случае это не так. вообще не запускается:

        if ($(".image-div").not(this).css('width') == '500px') {

        $(".image-div").not(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 400, function() {
                $(divRefTwo).css('z-index','1');
            });

        }

        else {
        }

UPDATE2 - Я обновил последнюю демонстрацию здесь: http://smartpeopletalkfast.co.uk/jquery2/basicDemo12-bugfix-6.htm

Условные операторы предотвращают запуск анимации в div, которые в любом случае не должны расширяться. Итак, это устранило проблему прыжков всех div.

Однако, когда анимация запускается при нажатии на div (как и предполагалось), этот div по-прежнему странно расширяется в IE7 и 8. Похоже, это связано со странной анимацией background-position.