如何在几秒钟后隐藏Flash消息？

Question

在我的应用程序中,用户可以为其他用户发布挑战 因此,在成功发布挑战后,我正在显示一条相同的flash消息.但现在我想在几秒钟后隐藏这条消息.所以我写了以下代码:

$(document).ready(function(){
    setTimeout(function() {
        $("#successMessage").hide('blind', {}, 500)
    }, 5000);
});

<div id="successMessage" style="text-align:center; width:100%">
    <FONT color="green">
        <%if flash[:alert]=="Your challenge is posted successfully."%> 
            <h4><%= flash[:alert] if flash[:alert].present? %>
        <%end%>
    </font>
</div>

但是这段代码并没有隐藏div"successMessage".

Answer 1

你可以试试 :

setTimeout(function() {
    $('#successMessage').fadeOut('fast');
}, 30000); // <-- time in milliseconds

如果你使用了这个,那么你的div将在30秒后隐藏.我也试过这个,它对我有效.

Answer 2

有人用这个解决方案向 stackoverflow 发布了一个类似的问题：

<script type="text/javascript">window.setTimeout("document.getElementById('successMessage').style.display='none';", 2000); </script>

<div id="successMessage"> bla bla bla
</div>

我想分享链接，但我找不到了。谢谢你的帮助，不过，神秘的人类！

Answer 3

您可以使用延迟jQuery API实现此目的。

$(document).ready(function(){
    $("#successMessage").delay(5000).slideUp(300);
});