CODEWITHSUNDEEP
jqueryfadeinfadeout
Roy
Roy

Reputation: 1518

How do I fade in element only AFTER content fades out jQuery with jQuery?

http://amyyatsuk.com/contact.html

I have an HTML form that uses jQuery ajax() to submit to a php processing page. In the success function of the ajax() call I have the following:

success: function() {
    $('#contactForm').fadeOut(1000);
    $('#hidden').delay(.1000).fadeIn(1500); 
    return false;

These effects are simultaneous. I'm looking to fade in the hidden div only after the contact form is fully faded out.

Thanks

Upvotes: 4

Views: 2438

Answers (3)

adeneo
adeneo

Reputation: 318212

There's a handy built in callback for that :

success: function() {
    $('#contactForm').fadeOut(1000, function() {
        $('#hidden').fadeIn(1500); 
    });
    return false;

Upvotes: 3

Rob Quincey
Rob Quincey

Reputation: 2896

You can add a second parameter to your fade out that contains the fade in you want to do. E.G

success: function() {
$('#contactForm').fadeOut(1000,function(){
$('#hidden').fadeIn(1500);
});
return false;

This will only fire once the fadeOut completes. Covered in the API Docs - http://api.jquery.com/fadeOut/

Upvotes: 1

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

The fadeOut and fadeIn effects contain an onComplete callback (optional):

$('#contactForm').fadeOut(1000, function(){
  $('#hidden').fadeIn(1500); 
});

Upvotes: 6

Related Questions