Different durations for CSS properties in jQuery animate ()

Question

Im using jQuery to animate a DOM element on a page, and I find an obstacle when using its native animate().

I am trying to move an element to the right and change its opacity.

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

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

I found out that I cannot write like this:

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


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

This will lead to a queue in the animation, because it is the same element, and jQuery must apparently wait for the first animation to complete. Or am I doing something wrong here.

( http://api.jquery.com/animate) queue: false, . , , .

, : CSS?

Answer 1

, , queue. , , , :

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

: :)

Answer 2

300 . 3/10 , 700 ?