Breadcrumbs

[Filip]

Hello everyone,

It's been a while since I've posted any tutorials.

This time, I decided to make tutorial more client side related, since last tutorial was server side related ([PHP] Make your site multilang!). This tutorial will be about:

Smooth transitions between pages in jQuery

If you don't want to follow tutorial, there is a code on the bottom of the page!

So let's begin with importing jQuery to our HTML file. All you have to do is add this bit of code to head section of your page:

Code: Select all

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Next step is to open <script> tag and get some coding done!

Now we will create function that will handle our document.ready event:

Code: Select all

$(document).ready(function() { 

Inside of this function, we will hide whole page first:

Code: Select all

$("body").css("display", "none");

and than fade in whole page with built in jQuery function fadeIn. Fade in process will last for 2 seconds (2000 mseconds)

Code: Select all

$("body").fadeIn(2000);

This is the code for loaded page. Now we will add event to all anchor (<a>) tags on page. Again we are creating function that will be called when anchor tag is clicked:

Code: Select all

$("a").click(function(event){

In next few lines of code, we will prevent default transition and declare variable which will hold href attribute of clicked link:

Code: Select all

	
event.preventDefault();
hrefVar = this.href;

And finally, we are fading out the page with fadeOut function and call redirection function (function name: transition):

Code: Select all

$("body").fadeOut(1000, transition);

After that, close the a.click event function with });

We still have to add redirection function which will be called after fade out effect:

Code: Select all

function transition() {
		window.location = hrefVar;
	}
    

And finally close the document.ready function with });

That would be it. If you want to copy paste complete code, here it is:

Code: Select all

$(document).ready(function() {
    $("body").css("display", "none");

    $("body").fadeIn(2000);

	$("a").click(function(event){
		event.preventDefault();
		hrefVar= this.href;
		$("body").fadeOut(1000, transition);
	});

	function transition() {
		window.location = hrefVar;
	}
    });

Thanks for reading this tutorial!
Hope you like it

-Filip

[Shim]

nice tutorial mate , keep it up i dont much have connections with jquery though :P