jQuery Effects and fadeOut fadeIn Page Load Blog - This article my background backs since the original blog page load is fairly slow because of javascript that I use so that when loading opening page looks a little distracted and look less tidy. To overcome this, the inspiration had to cover the deficit so that when the blog page is open already in full view corresponding layout of each element. But keep in mind, this does not mean speed up loading the blog but just manipulating the page during the loading process so that when the browser to load (read javascript is quite long) and sometimes results page views a little ragged so that does not look I used this method to cover possible the. Maybe if one of you were having problems as it is with this blog, can use this method as alternatives to manipulate the page to create the effect fadeIn and fadeOut so that every time they enter and explore the blog with a link are then each time the browser to load the page will display fading effect first page and the page currently open is already in a neat look of course.
Effects fadeIn Loading page
This effect I use on this blog, the demo can be viewed when opening a page in this blog. Although simple but passable to manipulate the blog page loading. The script is in use like this, how to install it go to Edit HTML then put on top of the code </ body>
< Script type = 'text / javascript " >
$ (document) .ready ( function () {
$ ( ' body ' ) .hide (). FadeIn ( 5000 ) .delay ( 500 )
});</ Script >
This script can walk. But usually after the blog layout is already evident and will but a new effect will start running. To eliminate beforehand, could use the CSS body {display: none} to hide the body before the script runs.
FadeIn Securities and fadeOut Page Load Blog
For this with little additional effect on exit of the page (left page). At the time of switching pages fadeOut effects will arise or the page will fade before the link to the next page. The workings of the script below is to select the entire link on the blog page, so it may be on the blog if there is a link to display a modal dialog lightbox or may be conflicting, and one of these effects is not running. To implement it into the blog the same way as the above steps, put it in the top of the code </ body>
< script type = 'text/javascript' >
$(document).ready( function () {
$( "body" ).css( "z-index" , "-10" );
$ ( "Body" ) .fadeIn ( 5000 );
$ ( "A" ) .click ( function (event) {
event.preventDefault ();
linkLocation = this .href;
$ ( "Body" ) .fadeOut ( 1000 , redirectPage);
});
function redirectPage () {
window.location = linkLocation;
}
});
</ Script >
But before applying the above is also necessary to ensure that the blog template has also been installed jQuery, can use the latest version or it could be version below.
< Script src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' />
If you have previously contained the code then just ignore the above code because it does not need to install it again.