Question

I would like to ask how is it possible for me to create a animation flow to show an update status, which will be animated through the flow of:

1. Form updated successfully
2. SlideDown to display the success status message within a div
3. Show this message for 5 seconds
4. Fade out the message after 5 seconds is up

This is what I have so far…

$("#status").empty().append("successfully updated." );
$('#status').slideDown('fast', function() {
    $("#status").show(5000, function() {
        $("#status").fadeOut('slow');
    });
});

Thank you very much.

Answer 1

Here’s one way:
HTML:

<form ...></form>
<div id="message" style="display:none;">Update successfull</div>

Javascript:

 $('#message').slideDown().delay(5000).fadeOut();

EDIT Modifying the code you just added, you should do it like this:

$("#status").empty().append("successfully updated." );
$('#status').slideDown('fast', function() {
    setTimeout(function(){
        $("#status").fadeOut('slow');
    }, 5000);
});

Hope this helps. Cheers