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

Question

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

Answer 1

下面的代码将使.fade_div类中的元素快速淡入,等待一秒(1000毫秒)并缓慢淡出.

$('#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演示