让隐藏的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 Demo

Answer 2

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

<强> FIDDLE DEMO

Answer 3

这么直接的问题：

使用：

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

详细了解here