问题
In my application user can post challenge for other user. So after successful posting a challenge I am displaying one flash message for the same. But now I want to hide this message after some few seconds. So I wrote following code :
$(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>
But this code is not hiding the div "successMessage".
回答1:
You can try :
setTimeout(function() {
$('#successMessage').fadeOut('fast');
}, 30000); // <-- time in milliseconds
If you used this then your div will be hide after 30 sec.I also tried this one and it worked for me.
回答2:
You can use the delay jQuery API to achieve this.
$(document).ready(function(){
$("#successMessage").delay(5000).slideUp(300);
});
回答3:
Someone posted a similar question to stackoverflow with this solution:
<script type="text/javascript">window.setTimeout("document.getElementById('successMessage').style.display='none';", 2000); </script>
<div id="successMessage"> bla bla bla
</div>
I'd share the link but I can't find it anymore. Thanks for the help, though, mystery human!
回答4:
Some times it's not enough to only setting display of box to none it's better to completely remove it. as follows:
setTimeout(function() {
$('.alert-box').remove();
}, 30000);
来源:https://stackoverflow.com/questions/31176402/how-to-hide-flash-message-after-few-seconds