To manage the behavior of your <a> tag, you need to take control using javascript.
Fading Section
Begin by setting an empty target :
<a href="#"> ... </a>
This makes sure that clicking it does nothing.
Next, use a custom attribute to store the URL you want to load upon clicking the tag :
<a href="#" data-url="new.html"> ... </a>
Add a class for javascript/jQuery targeting :
<a href="#" data-url="new.html" class="smoothLink"> ... </a>
In your javascript, target smoothLinks and create a delayed action (using jQuery here) :
$("a.smoothLink").click( function(e){
$("body").fadeOut(function(){ // This will fade out your entire page in about half a second. Once done, execute the callback function
window.location = e.currentTarget.attributes['data-url'].value;
});
}
For performance reasons, opt for CSS3 opacity animations (opacity 1 --> 0 --> 1) as they are hardware accelerated unlike jQuery's fade functions.
(JS)
$("a.smoothLink").click( function(e){
$("body").addClass("fadeOut"); // anything with the "fadeOut" class will become transparent in 1s as per our CSS
setTimeout( function(){ // waiting 1s then changing URL
window.location = e.currentTarget.attributes['data-url'].value;
}, 1000)
}
(CSS)
.fadeOut {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
FadeIn Section
Once the new page loads, it should be blank and then gradually fade in. Begin by making the whole body transparent :
(CSS)
body{
opacity :0;
}
Then, fade it in.
Using the jQuery method :
$("body").fadeIn()
Using the CSS3 method :
Give the body a "fadeIn" class in your HTML :
(HTML)
<body class="fadeIn">
Add instructions in CSS to fade in any element with the "fadeIn" class :
(CSS)
.fadeIn {
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
On loading the page, the body will gradually become visible in 1 second. This is untested but could be a helpful tip :)
EDIT - **
**Simplified solution with white overlay
Cover the entire page with a full white overlay which can be adjusted to transparent or opaque :
(HTML)
<div id="overlay"></div>
(CSS)
div#overlay{
position: absolute;
z-index:999;
top:0;
left:0;
width: 100%;
height: 100%;
background:white;
pointer-events:none; // allowing click through
opacity : 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
(JS)
$("div#overlay").css("opacity",0); // fading out the overlay on page load
$("a.smoothLink").click( function(e){
$("div#overlay").css("opacity",1);
setTimeout( function(){ // waiting 1s then changing URL
window.location = e.currentTarget.attributes['data-url'].value;
}, 1000)
}