11

I see that this question was asked many times, but none of the solutions worked for me. I have two effects that I want to execute in parallel.

I want the box to fade-in and bounce simultaneously: http://jsfiddle.net/6VVUG/

Registered User
  • 3,669
  • 11
  • 41
  • 65

2 Answers2

12

Chain the UI effects, and use dequeue() to execute them all at once.

$("#t").hide().show("fade", {},  {duration:1200}).effect("bounce", { times:3 },  { duration:400}).dequeue();

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • Thanks! You can either chain or put the dequeue() on the last effect: http://jsfiddle.net/6VVUG/2/ What is interesting that if you put dequeue() on both effects, the animation brakes. – Registered User May 06 '12 at 19:57
  • 1
    Yes, thats right, adding animations onto the same element is exactly the same as chaining them, they get added to the FX queue, and dequeue plays them all at once, emptying the FX queue, so if you use dequeue at the end of each statement, it won't work as intended. – adeneo May 06 '12 at 20:29
1

Try this 

function g()
 {
    $("#t").hide();
    $('#t').show();
    $("#t").animate({ opacity: 0.5 }, 0).effect("bounce", { times:3 },  { duration:400, queue: false});
    $("#t").animate({ opacity: 1 }, 0);
 }
Bibin Velayudhan
  • 3,043
  • 1
  • 22
  • 33