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\',function() {
                $(divRef).css(\'z-index\',\'1\');
            });
        }

    });

有谁知道为什么会这样吗？调试起来非常困难，因为问题仅在动画运行时才会出现。 谢谢 UPDATE-我尝试添加条件语句以仅在必要时运行动画（缩小展开的元素），但是这样做根本无法运行：

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

        $(\".image-div\").not(this).animate({
                width: \'250px\',\'1\');
            });

        }

        else {
        }

UPDATE2-Ive在这里更新了最新的演示： http://smartpeopletalkfast.co.uk/jquery2/basicDemo12-bugfix-6.htm 条件语句可防止动画在原本不应该扩展的div上运行。因此，这解决了所有div跳来跳去的问题。 但是，当动画在被单击的div上运行时（如其预期的那样），该div在IE7和8上仍会怪异地扩展。这似乎与怪异的背景位置动画有关。     

解决方法

        我暗中怀疑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,\'2\'); });
    }
    else {
        $(this).animate({
            width: \'250px\',backgroundPosition: \'-125px\'
        },\'1\'); });
    }

});

    ,        两件事导致了这个问题 IE 9之前的版本没有 支持背景位置 支持background-position-x和 背景位置 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的测试     ,           有谁知道为什么会这样吗？ 是的，这似乎是因为折叠动画正在所有其他图像上运行，如果只在展开的图像上运行折叠动画，则效率会更高，并且应该可以解决您的问题。 如果需要，我可以在jsfiddle中演示 您对问题的更新绝对是正确的主意，您只想在展开的图像上运行动画。 您可以在每次扩展图像

.addClass(\'expanded\')

时添加一个类，然后检查该类。显然，一旦该类再次崩溃，就将其删除。 您的更新无法正常运行，因为它需要通过

.each()

函数运行

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

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

        $(this).animate({
                width: \'250px\',function() {
                $(divRefTwo).css(\'z-index\',\'1\');
            });

        }

});

    ,        我已经检查了您提供的链接。确保验证您的html页面。更好的浏览器，例如Chrome，Firefox，Safari和其他所有浏览器，都将理解您的html事件，但会出现一些错误。 IE不那么灵活。无效的W3C html页面将包含一些惊奇之处。 而且您提供的链接不是W3C有效的。     ,        也许您可以尝试以下方法：

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