jQuery Animate - Apply 2 different animation attributes to the same element with 2 different timers

Question

The jQuery below works great, but I'd like to have the opacity last 2000 and the marginLeft 4000. I tried doing animate twice on the element but one wont start until the other has completed. Here is my working code:

$('.active-text', $('#message-box')).animate({opacity:1, marginLeft: "60px"}, 4000);

Here is what i tried doing to get the desired affect:

$('.active-text', $('#message-box')).animate({opacity:1}, 2000);
$('.active-text', $('#message-box')).animate({marginLeft: "60px"}, 4000);

Answer 1

Set queue: false in your animations to run it both at the same time:

$('.active-text', $('#message-box')).animate({opacity:1}, { queue: false, duration: 2000 });
$('.active-text', $('#message-box')).animate({marginLeft: "60px"}, { queue: false, duration: 4000 });