如何在几秒钟后隐藏 flash 消息?
How to hide flash message after few seconds?
在我的应用程序中,用户可以post 挑战其他用户。因此,在 post 挑战成功后,我会显示一条相同的闪现消息。但现在我想在几秒钟后隐藏这条消息。所以我写了下面的代码:
$(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".
你可以试试:
setTimeout(function() {
$('#successMessage').fadeOut('fast');
}, 30000); // <-- time in milliseconds
如果你使用这个,那么你的 div 将在 30 之后隐藏 sec.I 我也试过这个,它对我有用。
您可以使用 delay jQuery API 来实现。
$(document).ready(function(){
$("#successMessage").delay(5000).slideUp(300);
});
有时仅将框的显示设置为 none 是不够的,最好将其完全删除。如下:
setTimeout(function() {
$('.alert-box').remove();
}, 30000);
有人用这个解决方案向 Whosebug 发布了一个类似的问题:
<script type="text/javascript">window.setTimeout("document.getElementById('successMessage').style.display='none';", 2000); </script>
<div id="successMessage"> bla bla bla
</div>
我会分享 link,但我找不到了。不过,还是谢谢你的帮助,神秘人!
在我的应用程序中,用户可以post 挑战其他用户。因此,在 post 挑战成功后,我会显示一条相同的闪现消息。但现在我想在几秒钟后隐藏这条消息。所以我写了下面的代码:
$(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".
你可以试试:
setTimeout(function() {
$('#successMessage').fadeOut('fast');
}, 30000); // <-- time in milliseconds
如果你使用这个,那么你的 div 将在 30 之后隐藏 sec.I 我也试过这个,它对我有用。
您可以使用 delay jQuery API 来实现。
$(document).ready(function(){
$("#successMessage").delay(5000).slideUp(300);
});
有时仅将框的显示设置为 none 是不够的,最好将其完全删除。如下:
setTimeout(function() {
$('.alert-box').remove();
}, 30000);
有人用这个解决方案向 Whosebug 发布了一个类似的问题:
<script type="text/javascript">window.setTimeout("document.getElementById('successMessage').style.display='none';", 2000); </script>
<div id="successMessage"> bla bla bla
</div>
我会分享 link,但我找不到了。不过,还是谢谢你的帮助,神秘人!