Animations broken in jQuery 1.6!

Question

I upgraded to jQuery 1.6 this morning and now a lot of the animations I spent so long fine tuning in my app are now failing. Here is an example of one. Notice how the 1.5 animation keeps the box centered, but on the 1.6 animation the something goes wrong.

I have narrowed it down to something to do with the opacity being involved in the animation. If I remove the opacity it works fine...

Example with JQ 1.5: http://jsfiddle.net/LJZ54/3/

Example with JQ 1.6: http://jsfiddle.net/LJZ54/4/

Example with JQ 1.6 (no opacity): http://jsfiddle.net/LJZ54/5/

Question: How should I alter my animation code to work in the new jQuery 1.6?

Answer 1

I edited one of your jsFiddles to work with the new 1.6 changes.

Seems ok to me now: http://jsfiddle.net/tomgrohl/RULJN/

On your marginLeft and marginTop I changed the values from marginLeft:-200 to marginLeft:"-200px".

They need to be in quotes to work. Same for width and height.

To make the animations work I changed the following:

$('div').animate({
    width:400,
    height: 400,
    marginLeft: -200,
    marginTop: -200,
    opacity:1
},500);

To:

$('div').animate({
    width:"400px",
    height: "400px",
    marginLeft: "-200px",
    marginTop:"-200px",
    opacity:1
},500);

Putting the dimension in quotes makes the animation work. I have a feeling they should of been in quotes anyway.