CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4607502
user4607502

Reputation:

Javascript FadeIn Not Working Properly

I need some help with my code, This is what my HTML looks like:

<body onLoad="loader();">
<div class="loader"><img src="images/loader.gif></div> 
<div class="main"></div>

CSS:

.main {
   display:none;
}

So, the loading Gif Is shown, and then when the page fully loads, it should do this:

function loader() {
 setTimeout(function () {
    $("#main").fadeIn("fast");
    $("#loader").fadeOut("fast");
}, 1000);

};

But all it does, is that the loader div disappears, then the main div appears like it should for a split second, then just dissappears. Thanks in advance for any help. #:)

Upvotes: 0

Views: 79

Answers (1)

George
George

Reputation: 36794

I think you mean for the loader to fade out after main has faded in, in which case you'll need to take advantage of the callback argument.

You can also use delay() rather than setting a timeout.

You should also use $(document).ready() rather than invoking the function in the onload="" handler.

$(function(){
  $('.main').delay(1000).fadeIn('fast', function(){
    $('.loader').fadeOut('fast');
  });
});

Noted by Blauharley: You are targeting elements with an ID of main (and loader), whereas the elements in your markup use classes.

Upvotes: 1

Related Questions