How to jQuery show img 5 secs after page load?

How to jQuery show img 5 secs after page load? Using some code I found at stackoverflow I’m trying to use the following but its not working. What am I missing? Thanks!

$(document).ready(function () {
$(‘#paint’).show(10000); // 10 seconds
});

<a href=“#” id=“paint”></a>

#paint {
position:absolute;
top:0;left:0;
height:30px;width:30px;
background:url(paint.png);
opacity:0;
}

Hey there EricWatson,

Your element has an opacity of 0, but it’s display property isn’t set, which is what the .show() method changes by default, when a time is passed in it affects the width/height/opacity/display properties.

If you’d want to show something 5 seconds after page load try doing something like this:


$(document).ready(function () {
    setTimeout(function(){
        $('#paint').fadeIn(500);
    }, 5000);
});

And change your CSS slightly to not use opacity but rather the display property


#paint {
    position:absolute;
    top:0;
    left:0;
    height:30px;
    width:30px;
    background:#000;
    display: none;
}

Thank you so much. You wouldn’t happen to know how it should look would you if I wanted jquery to hide the image first then show it 5 seconds after page load? That way I can get rid of the CSS display none and degrade well. Thanks!

And will jquery hide before the image loads? So no flash of unstyled content.

The way I often take care of that is by placing a class on the <html> element called “no-js”, then in the <head> you can add some JS that adds a “js” class. This way you can target JS dependant things in your CSS.

e.g. something like this:


<html class="no-js">
<head>
    ...
    ...
    <script src="jquery.js"></script>

    <script>
        $("html.no-js").attr("class", "js");
    </script>

</head>
...

Then in your CSS:


#paint {
  /* normal CSS styles */
}

.js #paint { /* JS dependant styles */
  display:none;
}

cool cool. getting somewhere! Ok whats better? And whats the dif between setTimeout and .delay?

#paint {
display:none;
}

then the html.no-js bit

$(document).ready(function () {
setTimeout(function(){
$(‘#paint’).fadeIn(200);
}, 3000);
});

or

$(document).ready(function() {

// Hide the div
$("#paint").hide();

// Show the div in 5s
$("#paint").delay(3000).fadeIn(100);

});

or

$(document).ready(function(){
var hiddenDiv = $(“#hideMe”);
var show = function() {
hiddenDiv.fadeIn();
};

hiddenDiv.hide();
setTimeout(show, 5000);

});

all three work.

Yup, they all more or less do the same thing :wink:

In this case, it doesn’t matter too much which you use, as you already found out, there are multiple ways to accomplish this.

The main difference between setTimeout() and .delay() is that setTimeout is a build in JavaScript function and .delay() is a jQuery method that delays a queue.

Reading the jQuery.delay() documentation might help clear it up a little too. As a general rule, you should probably only use .delay() with jQuery animations and other queue-able things.

setTimeout is JavaScript’s built in method to execute a piece of code after a specific time, which offers more versatility and importantly, you can cancel a setTimeout (which you can not do with jQuery.delay()).

So your saying you prefer the settimeout here?

I’d probably prefer the setTimeout in this use case as it clearly indicates what the code is going to do. So when someone else reads this code is it very clear that it says “execute this code here after a delay of xxx milliseconds”.

Thank you very much for the assistance. I went with the adding a class to the html for display none. I found the all in one way showed the image for a split second first. Not good. And I use this html methos. Unless I’m misssing something its the same but without the premeditated added the class js-off in the html.

// Add .js to html tag if js ON
$(‘html’).addClass(‘js’);