jquery - 让隐藏的 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').....
}

score 8 · Accepted Answer

下面的代码将使具有.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");
});

score 0 · Accepted Answer

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

score 0 · Accepted Answer

这么直接的问题：

利用：

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

在此处阅读有关它的更多信息

3 回答 3