How to jQuery show img 5 secs after page load?

**PicnicTutorials** · Nov 1, 2012 14:24

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;
}

**AussieJohn** · Nov 1, 2012 15:59

Originally Posted by EricWatson

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!

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:

Code javascript:

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

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

Code css:

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

**PicnicTutorials** · Nov 1, 2012 17:20

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.

**AussieJohn** · Nov 1, 2012 17:27

Originally Posted by EricWatson

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!

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 Code:

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

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

</head>
...

Then in your CSS:

Code css:

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

**PicnicTutorials** · Nov 1, 2012 19:07

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

1)

#paint {
display:none;
}

then the html.no-js bit

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

or

2)

$(document).ready(function() {

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

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

});

or

3)

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

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

});

all three work.

**AussieJohn** · Nov 1, 2012 19:20

Originally Posted by EricWatson

all three work.

Yup, they all more or less do the same thing

Originally Posted by EricWatson

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

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()).

**PicnicTutorials** · Nov 1, 2012 19:50

So your saying you prefer the settimeout here?

**AussieJohn** · Nov 1, 2012 20:17

Originally Posted by EricWatson

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".

**PicnicTutorials** · Nov 2, 2012 04:18

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');

User Tag List

Thread: How to jQuery show img 5 secs after page load?

Thread Tools

Display

How to jQuery show img 5 secs after page load?

Bookmarks

Bookmarks

Posting Permissions