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

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,它支持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'); });
    }

});