CODEWITHSUNDEEP
javascriptjqueryajaxfunction
Reflex84
Reflex84

Reputation: 313

fadeout function along with slidetoggle function

When I submit my form, the last function I have is:

$("#message").show().delay(5000).fadeOut();

This will show my thank you message for 5 seconds, and then fade the "message" div out.

I then tried adding this function below it:

$("#slide_panel").slideToggle("slow");

because I want the form (which is inside the #slide_panel div) to close / slide up AFTER the 5 second delay.... but when I add this function, its almost like the 5 second delay doesn't exist and the success message shows for about half a second and then the whole contact form dissapears as its supposed to.

What is wrong with my code?

$("#message").show().delay(5000).fadeOut();
$("#slide_panel").slideToggle("slow");

Upvotes: 1

Views: 504

Answers (3)

Eliran Malka
Eliran Malka

Reputation: 16263

This has to do with the asynchronous behavior of the animation functions in jQuery.

In order to activate the slideToggle after the fadeOut delay, you must call it from the fadeOut's callback function, i.e.:

$("#message").show().delay(5000).fadeOut(0, function() {
    $("#slide_panel").slideToggle("slow");
});

Upvotes: 0

Akhil Thayyil
Akhil Thayyil

Reputation: 9413

You can update the code to the following ...

$("#message").show().delay(5000).fadeOut(function(){
    $("#slide_panel").slideToggle("slow");        
});

That is, add the slideToggle of SlidePanel in the message callback. For more ideas, check http://jsfiddle.net/sf2Nr/1/

Upvotes: 1

Ehtesham
Ehtesham

Reputation: 2985

delay function applies only to animation queue. you can use the following code by passing a call back function to fadeOut()

   $("#message").show().delay(5000).fadeOut('fast', function(){
         $("#slide_panel").slideToggle("slow");
   });

Now the slideToggle will run once the animation is completed.

Upvotes: 2

Related Questions