jQuery .animate working in Firefox but not Chrome and IE

I have a basic animation I am trying to get working at http:开发者_StackOverflow社区//jsfiddle.net/5YrF2/3/

Everything works as expected in Firefox, but in Chrome or Internet Explorer the position of the animated object jumps to the bottom of the screen after the first animate command.

Can anyone see what im doing wrong?

UPDATE I have now created a new version of the animation with extra pipes at http://jsfiddle.net/5YrF2/6/

Everything works ok up until .block3 is animated, it is supposed to go right 10 pixels and then up 15 pixels. Instead it does some strange wiggle. Anyone any ideas?

You have an absolutely positioned div, with no bottom set. Chrome & IE are working correctly in this case -- your second animation adds 10 to "bottom", which sets bottom to 0 (since it's unset) and animates it to 10. An absolutely-positioned div with a "bottom" of 10, and no top, will display 10 pixels from the bottom of the container.

Did you want the element to move "up"? If so, I'd say use top instead. (But you will have the same problem, since you also didn't have a top attribute set). I would get rid of "margin-left" and "margin-top" on your element and use top/left/etc. instead.

You're trying to animate the CSS "bottom" attribute, which can go wrong when it's not explicitly set in the first place. Try animating the "top" attribute instead and reverse the direction:

http://jsfiddle.net/5YrF2/4/

$.Deferred(function(dfr) {
    dfr.pipe(function() {
        return $(".block1").delay(500).fadeIn().animate({
            left: '+=600'
        }, 2500, "linear").animate({
            left: '+=10',
            top: '-=10'
        }, 100, "linear").animate({
            left: "+=27"
        }, 100, "linear").animate({
            left: '+=10',
            top: '+=10'
        }, 100, "linear").animate({
            left: "+=25"
        }, 100, "linear").fadeOut();
    }).pipe(function() {
        return $(".block1").css('left', '');
    }).pipe(function() {
        return $(".block1").delay(500).fadeIn();
    })
}).resolve();