jQuery animations mess up in IE8 and earlier

Question

Here is my site: http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm

It works fine on firefox, chrome, safari and ie9, but messes up in IE8 and 7.

When you click on an image it expands. When you click on another image, any expanded images contract. I think its this second part of the jQuery causing problems. With IE8 and 7 the animation end up in the correct place, but all the images jump around before then.

Here is the code:

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

    });

Does anyone have any ideas why this is happening? Its quite hard to debug as the issue only presents itself while the animation is running.

Thanks

UPDATE- Ive tried adding conditional statements to only run the animation (that shrinks expanded elements) when necessary, but with this it doesn't run at all:

        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 - Ive updated the latest demo here: http://smartpeopletalkfast.co.uk/jquery2/basicDemo12-bugfix-6.htm

The conditional statements prevent the animation from running on divs that aren't supposed to expand anyway. So this has fixed the problem of all the divs jumping about.

However when the animation runs on the clicked on div (like its supposed to), that div still expands weirdly on IE7 and 8. It seems like this is to do with the background-position animating weirdly.

Answer 1

Two things caused this problem

• IE prior to version 9 does not support background-position, it supports background-position-x and background-position-y

• jQuery will not switch to supported styles when it should

Forcing jQuery to use supported styles

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

Put this script in page right after jQuery-1.6.1 script.

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