Add hide
class to alert-message
. Then put the following code after your jQuery script import:
$(document).ready( function(){
$(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
window.setTimeout( function(){
$(".alert-message").slideUp();
}, 2500);
});
If you want handle multiple messages, this code will hide them in ascending order:
$(document).ready( function(){
var hide_delay = 2500; // starting timeout before first message is hidden
var hide_next = 800; // time in mS to wait before hiding next message
$(".alert-message").slideDown().each( function(index,el) {
window.setTimeout( function(){
$(el).slideUp(); // hide the message
}, hide_delay + hide_next*index);
});
});