CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mxstbr
mxstbr

Reputation: 11477

jQuery .delay in combination with .fadeOut doesn't do anything

The Problem

I wanted to add a simple loading animation to my website using jQuery, and it appears when I load the page - but it simply repeats forever and doesn't fade out after 500ms like specified.

The Code

JS Fiddle

HTML

<div class="loading">
    <img src="http://www.puzzlexperts.com/images/Preloader_3.gif" id="loader">
</div>

CSS

#loader { 
    display: block; 
    position: absolute; 
    left: 45%; 
    top: 45%; 
    z-index: 1000;
}

.loading {
position: absolute; 
    z-index: 100; 
    height: 100%; 
    width: 100%; 
    background-color: #fff;
}

JS

$(window).load(function() {
        $("#loader").delay(500).fadeOut("slow");
        $(".loading").delay(500).fadeOut("slow");
    }

How it should work

I hoped it would show the loading animation on a plain white fullscreen background for 500ms, then fadeOut slowly to reveal the website.

Do you guys know how to fix this behaviour?

Upvotes: 1

Views: 1269

Answers (2)

abir_maiti
abir_maiti

Reputation: 490

You have not ended your code properly.

$(window).load(function() {
        $("#loader").delay(500).fadeOut("slow");
        $(".loading").delay(500).fadeOut("slow");
    });

Here is a fiddle http://jsfiddle.net/Lds2X/1/

Upvotes: 1

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

You have missed the closing brackets of window.load

$(window).load(function() {
    $("#loader").delay(500).fadeOut("slow");
});

Upvotes: 7

Related Questions