JQuery Fade In Pages

Question

I have a bunch of HTML pages, that are seperate files but I want to have a simple fade in/out between each of them.

I have used the code of:

$("#content").css("display", "none");

$("#content").fadeIn(2000);

$("ul.menu li a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#content").fadeOut(1000, redirectPage);      
});

function redirectPage() {
    window.location = linkLocation;
}

I have bound it to my main menu at this stage, and content is the div between my header and footer (which I dont want to apply the effect to)

But the problem with this, is that it flickers a little, plus it shows the content briefly before disppearing and then fading it in again.

Is there a better/easier solution for this?

Set `display:none` for #content in your CSS file, that will prevent it from appearing briefly, before the JS is executed. — robertklep, Jan 11 '13 at 09:07
@robertklep your comment should be an answer, it's the right one, although I would use visibility to prevent shifting — Ruan Mendes, Jan 12 '13 at 09:13

bumerang · Answer 1 · 2013-01-12T09:07:30.647

0

Try this code:

$("#content").css("display", "none");

$("#content").fadeIn(2000);

$("ul.menu li a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#content").fadeOut(1000, redirectPage);      
});

function redirectPage() {
    $("#content").css('visibility' : 0); // use to remove the content - it won't be diplayed
    window.location = linkLocation;
}

edited Jan 12 '13 at 09:07

answered Jan 11 '13 at 09:12

bumerang

1,776
21
30

Works better, but the whole screen flickers disjointly after the fade out of the current page and before the fade in of the new page. – Palemo Jan 12 '13 at 02:27
Try the code now, I have update it to set `visibility` to `0`. this should help You. – bumerang Jan 12 '13 at 09:08
Hmmm, still makes no difference. I had to change the visibility line to - $("#content").css("visibility","none"); in order to make it work at all. And changing the first line to $("#content").css("visibility", "none"); seems to make it work well - except the new page fadein does not happen (it just pops in straight away) – Palemo Jan 12 '13 at 10:32
try then: `$("#content").css("visibility", "none");` in the first line. But try if it will help You if You will put in `$(document).ready(function(){ $("#content").css("visibility", "none");})` – bumerang Jan 12 '13 at 14:15
That is fine - but it does not fade in the new page content (just appears straight up after existing content has faded out) – Palemo Jan 13 '13 at 05:19

JQuery Fade In Pages

1 Answers1