Different durations for CSS properties in jQuery animate()

Question

I’m using jQuery to animate DOM element on the page and I hit an obstacle when using its native animate().

I’m trying to move my element to the right and change its opacity.

$element.animate({
    'left': '50%',
    'opacity': '1.0'
}, 1000);

It works very well, but I need to animate position in 1000ms and opacity in 300ms.

I found out that I can’t write it like this:

$element.animate({
    'left': '50%'
}, 1000);


$element.animate({
    'opacity': '1.0'
}, 300);

This will result in queued animation, because it is the same element and jQuery apparently needs to wait for the first animation to finish. Or I’m doing something wrong here.

I tried using second argument notation (based on http://api.jquery.com/animate) and using queue: false but it didn’t work. I must say I don’t understand it thoroughly, so any corrections are welcome.

So my question is this – how to independently change duration interval for these CSS properties?

Answer 1

Could you animate both in one call for 300 ms. up to 3/10 of the position change, and then animate the remainder of the position change for another 700ms?

Answer 2

I think you were on the right track when trying to use queue. Here's an example of how this should be working, I hope it helps :

$('#element').animate({ left:'50%' }, { queue: false, duration: 1000 })
             .animate({ opacity : '1.0' }, { queue : false, duration: 300 });

Edit: Successfully Tested :)