Solved

Page transitions (fade in/out) with JQuery

Posted on 2008-10-26
3
8,502 Views
Last Modified: 2013-11-11
Hi everyone,

I was wondering if anyone had any good pointers for using JQuery to achieve page transitions (ie: Once page is loaded, page fades in, then on link click the page fades out and fades in the next page).

I have been using scriptaculous to achieve this with some success however I am finding that lots of componants are just flashing in order out so looking to change languages to something with a little bit more "punch" to it.

Any suggestions regardless of scripting language would be greatly appreciated. An example of my current scriptaculous page transition can be seen at www.richardmassey.com.au
0
Comment
Question by:RichardMass
  • 2
3 Comments
 
LVL 16

Expert Comment

by:sh0e
Comment Utility
FYI, EE has a section for jQuery: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/#browseZones
Not to knock Scriptaculous, but I have found jQuery to be more compatible in general.

Here is how to hide, fade in, and fade out.
$(document.body).hide();
$(document.body).fadeIn();

$(document.body).fadeOut();
0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
Comment Utility
jQuery has slightly different syntax from Prototype.  But you should be able to pick it up fast.  You might trip over yourself using the wrong syntax a little at first.

I took the liberty of writing a demo for you.
<html>

<head><title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

        jQuery('a').click(function(){

        jQuery(document.body).fadeOut();

        setTimeout("nav('"+this.href+"')",1500);

        return false;

    });

});

 

function nav(href){

 location.href=href;

}

</script>

</head>

<body>

<a href="test.html">test</a>

<a href="http://www.google.com">Google</a>

<a href="http://jquery.com">jQuery</a>

</body>

</html>

Open in new window

0
 
LVL 1

Author Closing Comment

by:RichardMass
Comment Utility
That's fantastic, thank you so much. I've been able to pick your example apart and work out what does what and it has helped with playing with other functions as well.

Thank you heaps. I'm sure I will have more question on EE regarding JQuery but you have given me a great start.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now