Question

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");

Answer 1

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/