How to fade in a div message on page load with jQuery

Question

I am trying to display a div message when the page loads using fadein and fadeout after 3 secs but my code does not seem to work, any help please? what am I doing wrong?

HTML

<div id="message" class="jumbotron" style="display:none;">
    <p><?php echo $m; ?></p>
</div> 

jQuery

$(document).ready(function(){

        $('div#message').fadeIn(3000).delay(3000).fadeOut(2000);

});

Answer 1

Your code works for me ( Here's a fiddle ). The issue is either that you haven't included a valid link to the jQuery library, or there is an error that occurs before it gets to the below code that causes it to stop executing.

jQuery

$(document).ready(function(){
        $('div#message').fadeIn(3000).delay(3000).fadeOut(2000);
});

Answer 2

Just fade in the message on page load and then set a timeout in order to fade out after 3 seconds

Check the DEMO

EDIT

$('#message').fadeIn()
.queue(function() {
    setTimeout(function() {
        $('#message').fadeOut();
    }, 3000);
    $(this).dequeue();
});

Answer 3

Are you writing this script on the same page as the div element or does this lies in an external page? If on external page then try checking if the control even passes to this page or not by simply putting an alert box or not.
If this script is on the same page, then make sure you write this script after the element you defined as if you have written this on the top or before the #message div then the script would run before it even gets loaded on page and you would not see any difference.

Answer 4

$('div#message').fadeIn(3000,function()
{
    $(this).delay(3000);
    $(this).fadeOut(200);

});

Hope this will work for you.