5

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);
user1058223
  • 147
  • 2
  • 8
  • 1
    You can check this answer (possible duplicate): http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously [1]: http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously – Kemal Can Kara Nov 28 '11 at 16:04

1 Answers1

17

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 });
Samich
  • 29,157
  • 6
  • 68
  • 77
  • awesome, thank you! I simplified it abit like this: $('.active-text', $('#message-box')).animate({opacity:1}, { queue: false, duration: 1000 }).animate({marginLeft: "60px"}, { queue: false, duration: 4000 }); – user1058223 Nov 28 '11 at 16:15