// Messages flashs var myMessages = ['info','warning','error','success']; // define the messages types function hideAllMessages() { var messagesHeights = new Array(); // this array will store height for each for (i=0; i<myMessages.length; i++) { messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport } } $(document).ready(function(){ // Initially, hide them all hideAllMessages(); $('.message').animate({top:"0"}, 500); // When message is clicked, hide it $('.message a.message-close').click(function(){ $(this).parent('.message').animate({top: -$(this).outerHeight()-50}, 700); return false; }); });