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 solid black;
    top: 300px;
    left: 300px
}

<input type="button" value="Add Item" id="mybutton">

<div class="fade_div">Successfully Added!</div>

$('mybutton').click(function(){
    $('.fade_div').....
}

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

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

FIDDLE DEMO

Such a straight question:

use:

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