CODEWITHSUNDEEP
jquery
user1048676
user1048676

Reputation: 10066

Remove div after a certain amount of time

All, I've got the following jQuery code:

jQuery.post(site_url + "save_data.php", jQuery(this).serialize(),
    function(data) {
        //alert("Data Loaded: " + data);
        jQuery("#results").html(data+"<br><br>");
        jQuery("#check_submission").val("yes");
    });

I'd like to fade out the results div after a certain amount of time (5 seconds).

In addition to that, if I resubmit the form, I'd like to display the results div again for another five seconds and then fade it out again.

Can anyone point me in the right direction on how to do this?

Thanks!

Upvotes: 2

Views: 2129

Answers (2)

Brad Christie
Brad Christie

Reputation: 101614

jQuery.post(site_url + "save_data.php", jQuery(this).serialize(), function(data) {
    //alert("Data Loaded: " + data);
    var results = jQuery("#results");

    results.html(data+"<br><br>")

    results.show(); // re-display the div
    setTimeout(function(){ // then fade it out....
      results.fadeOut();
    }, 5000); // ...after 5 seconds

    jQuery("#check_submission").val("yes");
});

Upvotes: 1

Los Frijoles
Los Frijoles

Reputation: 4821

Replace your results line with the following:

$("#results").html(data+"<br><br>").fadeIn(10).delay(5000).fadeOut(200);

It will fade in smoothly in 10ms (100 would probably be better) to undo any previous fading out, delay 5 seconds, and then fade out in 200ms.

EDIT: If you are using jQuery < 1.4, you can use as a workaround for the lack of a delay function:

$("#results").html(data+"<br><br>").fadeIn(10).animate({opacity: 1.0}, 5000, function () { 
    $("#results").fadeOut(200);
});

Upvotes: 0

Related Questions