0

We can write a single line of code only if the animation functions are same, like animate( {top: "50px", opacity: 0} ), but how do you perform the animations simultaneously if the animation functions are different, say slide up and animate( {top: "50px"} )?

JJJ
  • 32,902
  • 20
  • 89
  • 102
Sarthak Gupta
  • 642
  • 3
  • 8
  • 23
  • possible duplicate of [How to run two jQuery animations simultaneously?](http://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously) – JJJ Aug 26 '11 at 11:29

1 Answers1

2

When calling to .animate() set the queue value to false, which will cause all animations to run at the same time.

$('div').animate({
    opacity: 0.25,
    height: '400px',
}, {
    queue: false,
    duration: 5000
}).animate({
    width: '500px'
}, {
    queue: false,
    duration: 5000
});

Example on jsfiddle

Mark Coleman
  • 40,542
  • 9
  • 81
  • 101
  • basically I want to use fadeIn and animate so that the element fades into the screen as well as move mhrizontally for which I may change its left position or the margin. I cant seem to get it going... can we specify queue: false in the fadeIn effect also... if we can kindly tell the syntax as I am already using is but cannot get it to work.... – Sarthak Gupta Aug 29 '11 at 07:24
  • Simply use `.animate()` instead of `fadeIn()` e.g. `.animate({ "opacity": "show"},{queue:false, duration:"slow"});` – Mark Coleman Aug 29 '11 at 11:41