Make Hidden Div Appear Then Fade Away?

What is the simplest way to make a div appear then fade a way for a few second? .fade_div { visibility: none; position: fixed; background-color: yellow; border: 1px

Solution 1:

The following code will make the elements with .fade_div class fade in quickly, wait one second (1000ms) and fade out slowly.

$('#mybutton').click(function(){
    $('.fade_div').finish().fadeIn("fast").delay(1000).fadeOut("slow");
});

You might want to stop using visibility: hidden;(not none) and use display: none instead.

For an instant appearance instead of fade in:

$('#mybutton').click(function(){
    $('.fade_div').finish().show().delay(1000).fadeOut("slow");
});

jsFiddle Demo

Solution 2:

$('#btn').click(function(e){    
    $('#fancy').fadeOut('slow', function(){
        $('#bank').fadeIn('slow');
    });
});

FIDDLE DEMO

Solution 3:

Such a straight question:

use:

$(".fade_div").fadeOut(1500, someFunctionCallAfterFadeDone);

Read more about it here