让隐藏的div出现然后消失？

让 div 出现然后淡出几秒钟的最简单方法是什么？

.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').....
}

以下代码将使元素.fade_div类快速淡入，等待一秒（1000ms），然后缓慢淡出。

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

您可能想停止使用visibility: hidden; （不是没有）并使用display: none反而。

要立即出现而不是淡入：

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

jsFiddle 演示 http://jsfiddle.net/itay1989/xgW2b/