jQuery淡入淡出过渡到下一页时会引起怪异的闪烁

Question

I have an issue with my jQuery code where whenever I transition to another html file in my repository, there is this subtle flicker that happens before the next page transitions in.

Here is the code:

$(document).ready(function() {
    $('body').hide().fadeIn(200);
    $("a").click(function(e) {
        e.preventDefault();
        $link = $(this).attr("href");
        $("body").fadeOut(200,function(){
          window.location =  $link; 
        });
    });
 });

I'm really not sure how to solve it and could use some help in figuring out...thanks!

Answer 1

To understand this behavior, first take a look at how $(document).ready works in jQuery:

The ready event occurs when the DOM (document object model) has been loaded.

The code inside $(document).ready - and thus, the hide() function - gets executed once the page has already been rendered, naturally causing a noticeable flicker before hiding the body all of sudden and then fading it in.

One way to solve this issue could be by adding some CSS and approaching the problem from a different angle.

First, you could add a class, ex. .faded-out to the body element in HTML.

The following CSS code would need to be added:

body{
    transition: opacity 200ms ease-in-out;
}

.faded-out{
    opacity: 0;
}

(the 200ms corresponds to 200 in jQuery; ease-in-out corresponds to default animation timing function in jQuery, swing )

Then, you could remove .faded-out class from body inside of $(document).ready like this:

$(document).ready(function() {
    $('body').removeClass("faded-out");
    ...your remaining code
    });
 });

Perceived effect should be the same, minus the flicker, as the body is faded out before $(document).ready gets called.