Анимации jQuery портятся в IE8 и более ранних версиях

Question

Вот мой сайт: 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 все еще странно расширяется в IE7 и 8. Кажется, что это связано с фоновой позицией, которая странно анимируется.

Answer 1

Две вещи вызвали эту проблему

• IE до версии 9 не поддержка background-position, это поддерживает background-position-x и background-position-y

• jQuery не будет переключиться на поддерживаемые стили, когда это должен

Принудительное использование jQuery поддерживаемых стилей

var default_css = $.css;
$.css = function (elem, name, extra) {
    name = $.camelCase(name);

    // if requested css name is not backgroundPosition then jQuery can handel it
    if (!name.match(/.*backgroundPosition/i) || !elem.currentStyle || elem.currentStyle[name]) return default_css.apply(this, arguments);

    // if backgroundPosition is supported by browser then return backgroundPosition value
    var style = elem.style;
    if (!extra && style && style[name]) return style[name];

    // if we get here browser doesn't support backgroundPosition, we need to fix it
    return default_css(elem, 'backgroundPositionX', extra) + ' ' + default_css(elem, 'backgroundPositionY', extra);
};

Поместите этот скрипт на страницу сразу после скрипта jQuery-1.6.1.

Протестировано с IE7, IE8, IE9, Chrome, Opera, Firefox и Safari

Answer 2

У меня есть подозрение, что IE не обновляет значения CSS после анимации.Это означает, что при нажатии на изображение другие изображения анимируются снова .Я проверил это:

$($(".image-div")[0]).css('background-position')

В IE это не определено.В FF оно имеет правильное значение.Таким образом, анимация происходит в IE, так как значение отсутствует.Почему это так, я не знаю.

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

Попробуйте это:

$(".image-div").click(function () {
    // reset expanded images
    $(".image-div").not(this).each(function() {
        if ($(this).css('z-index') == '2') {
            $(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 400, function() { $(this).css('z-index','1'); });
        }
    });

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

});

Answer 3

У кого-нибудь есть идеи, почему это происходит?

Да, похоже, потому что анимация коллапса работает на всех других изображениях, она была бы гораздо более эффективной.и должен решить вашу проблему, если вы запустите анимацию свертывания только на расширенном изображении.

Я мог бы продемонстрировать это в jsfiddle, если необходимо

---

Ваше обновление вашего вопроса определенно имеет правоидея, вы хотите запустить анимацию только на расширенном изображении.

Вы можете добавлять класс каждый раз, когда расширяете изображение .addClass('expanded'), а затем проверять этот класс.Очевидно, что удаление этого класса после его свертывания снова.

Ваше обновление не работает , так как ему необходимо выполнить функцию .each()

$(this).siblings().each(function(){

 if ($(this).width() == '500px') {

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

        }

});

Answer 4

Может быть, вы могли бы попробовать это:

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

Answer 5

Я проверил ссылку, которую вы дали.Не забудьте проверить свою HTML-страницу.Лучшие браузеры, такие как Chrome, Firefox, Safari и все такое, поймут ваше html-событие с несколькими ошибками.IE не такой гибкий.HTML-страница, которая не является действительной W3C, будет содержать несколько сюрпризов.

И ссылка, которую вы дали, недействительна для W3C.