CODEWITHSUNDEEP
jquery
Aaron Navies
Aaron Navies

Reputation: 1263

Delay jQuery fadeIn 5 seconds

How can I properly delay this fade in by 5 seconds? When I change the number '(2000)' it loads the image from opaque to transparent. I want to simply delay the fade in by 5 seconds altogether.

$(document).ready(function() {
    $('#page_effect').fadeIn(2000);
});

<div id="page_effect" style="display:none;">

Update

<!--1.0 Fader-->
<script type="text/javascript">
$(document).ready(function(){

$('#page_effect').delay( 5000 ).fadeIn(2000);

});
</script>

Upvotes: 4

Views: 3544

Answers (1)

nietonfir
nietonfir

Reputation: 4881

There are a couple of different ways how you can achieve your desired solution. I will post two that come immediately to mind.

First would be jQuery's own .delay():

$('#page_effect').delay(5000).fadeIn(2000);

The second one is obviously setTimeout:

var effectTimer = setTimeout(function() {
    $('#page_effect').fadeIn(2000);
}, 5000);

Storing the timer lets you cancel it if necessary/required.

A third - and in my opinion the preferred - solution would be via CSS:

#page_effect {
    opacity: 0;
    transition: opacity 2s ease-in-out 5s;
}
#page_effect.active {
    opacity: 1;
}

You than simply add the class at domReady. And instead of defining the delay in the transition, you could use setTimeout again (but don't forget to remove the delay from the CSS declaration).

Upvotes: 6

Related Questions