All geek questions in one place

Perform a fade-in when the page initially loads?

I am working on some jQuery code to apply page transitions. What I want jQuery code to execute basically results in the page fading out:

$("body").css("display", "none"); $("body")().fadeIn(400);

As soon as the page loads the page reload and then performs the specified fade out, but what I want to do is fade out the entire web page from the very beginning and try:

$(document).load(function() {

However, this does not work. I also tried this code to no avail:

 $("body").load().css("display", "none"); $("body").load().fadeIn(400);

Is there any visible error in my code blocks that can be fixed to apply the desired behavior, or can the community direct me to a guide that demonstrates the correct implementation of what I intend to do?

+4
source share
4 answers

You can put this in a .css file -

 body { display:none; }

Or even put it on a line like this:

 <body style="display:none;" >

And then in the callback $(document).ready() disappears when using this -

 $(document).ready(function(){ $("body").fadeIn(400); });

First, the browser will display the HTML according to your css file. Therefore, when the browser comes to the rendering of the <body> , it will see a css rule that says that its display property should be set to none . Only after loading HMTL and jQuery is ready ( $(document).ready() ), can you call fadeIn() ;

+2
source

You can use CSS to make the whole page invisible or hidden:

 body { display: none; }

Or:

 body { visibility: hidden; }

You can set this as inline CSS inside the <head> . Then inside jQuery you can make it fade out.

+1
source 
 // $("body")().fadeIn(400); // this is incorrect, try with: $('body').fadeIn(400);

It means:

 $("body").css("display", "none"); $(window).load(function(){ // use "window" $('body').fadeIn(400); });

Or you can try setting display:none; directly from your CSS (depending on your needs)

 body{ display:none; }
0
source

You should use the download window, not the DOM.

Try:

  $(window).load(function(){ $("body").css("display", "none"); $("body").fadeIn(400); })

And for further explanation try here.

0
source

Source: https://habr.com/ru/post/1413413/

More articles:


All Articles