Search code examples
onclickfadeinonloadfadeouttransition

On Load and On Click page to page fade transition

Morning all,

I have searched throughout the web for this and cannot even find a breadcrumb to what I am looking for.

If possible css3 only if not jQuery will do.

1) I want the whole page to smoothly fade in onload

2) When clicked on a nav link to another page I want the whole page to smoothly fade out and then fade in the new page. (separate html files, not using a single page design).

Need a cross browser friendly clean and simple code on this one.

Much appreciated.

Solution

  • You should use something like

    FindImage.css({ "opacity": "0.1" }).animate({ "opacity": "1" }, "slow");

    inside onload function and

    FindImage.css({ "opacity": "1" }).animate({ "opacity": "0.1" }, "slow");

    inside the callback function of click function of nav button