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 上运行时(就像它应该的那样)，该 div 在 IE7 和 8 上仍然会奇怪地扩展。这似乎与背景位置动画奇怪有关。

Answer 1

有两件事导致了这个问题

• IE 9 之前的版本不支持支持背景位置，它支持背景位置 x 和背景位置-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 脚本之后。

Tested with IE7, IE8, IE9, Chrome, Opera, Firefox and Safari