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');
            });
        }

    });

有没有人知道为什么会这样？它很难调试，因为问题只在动画运行时出现。

由于

UPDATE-我已经尝试添加条件语句来仅在必要时运行动画（缩小扩展元素），但是这样根本不运行：

        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

导致此问题的两件事

版本9之前的IE没有它支持背景位置支持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

我查看了您提供的链接。请务必验证您的html页面。更好的浏览器，如Chrome，Firefox，Safari等等，都会理解您的html事件，但会出现一些错误。 IE不那么灵活。一个非W3C有效的html页面会有一些惊喜。

您提供的链接不是W3C有效。

Answer 5

也许你可以试试这个：

        $(".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');
                });
            }
        });

IE8及更早版本中的jQuery动画陷入困境

5 个答案:

导致此问题的两件事

强制jQuery使用支持的样式