Question

After just now spending too much time debugging why my jQuery animate() calls stopped working correctly, I realized my problem was the properties in the animate() call have to be in a specific order. So the following will not work properly:

$('div.example').animate({left: 50, top: 100, opacity: 1});

What will happen is the div.example will fade in (if it wasn’t already) and will just appear at position left:50, top:100, it will not animate. To get this to work as expected, you have to reorder:

$('div.example').animate({opacity: 1, left: 50, top: 100});

I tested this in FF4 and Chrome. This surprised me as I wasn’t even aware that Javascript guaranteed order of properties in objects and jQuery makes no mention of this requirement in their docs. So my question is basically, am I doing something wrong? Is this expected? Is there documentation on what the proper order is? Will this work properly in all browsers?

I’m using jQuery UI as well. I know that enhances the standard animate method to allow for animating colors and such. Is that potentially the issue?

Answer 1

This a jQuery bug: cannot animate position and opacity at same time but is fixed in 1.6.1

In the meantime, you can fix it by adding “px” on the end:

$('div.example').animate({top: '100px', left: '50px', opacity: 1});