Adding the final touches to a site can be the difference between a polished and beautiful site that looks “refined,” and a mediocre site that leaves no impression on visitors. jQuery, the versatile JavaScript library, can be leveraged to create all these fine tuned elements. Today we’re going to look at how to use it to create elegant page transitions. Let’s get to it!
If you would like to quickly take a peek at a very simple implementation of this technique, below is the demo for viewing and download.
Getting Started With HTML/CSS
To begin, let’s dive straight into the CSS. We’ll need to change the CSS for the
and set it todisplay: none.
body { display: none; }
This will stop all of the visual elements in the body from loading, initially “hiding” everything. Immediately, astute readers will realize that changing the body’s display tag to none is risky. If visitors have JavaScript disabled, they won’t be able to view the site.
Therefore, a better solution will be adding the display:none CSS property using jQuery. If visitors have JavaScript disabled, they will still be able to see the body content.
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
});
</script>
Your HTML doesn’t have to change much to get these transitions working, but before we get started on that, let’s download and attach jQuery to our page. Visit jQuery and download the latest version of jQuery – it’s easiest to just right-click the link and select “Save Linked File As”. I would suggest downloading the minified version since we’re not going to be changing the source code, but just building on the library.
After downloading jQuery , move the file to a favourable location of your choice in your site directory. Now let’s see the HTML needed to attach jQuery to our site.
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
I suggest appending this in the head section of your document. It is advisable to attach all of your JavaScript at the end of your document to ensure a speedy loading time. However, we need this when the page loads and minified jQuery only comes in at a measly 74kb.
Coding Page jQuery Transitions
Once that’s complete, we need to write the jQuery code that creates the fade transition. First, let’s deal with page fade-ins. In the head section, code up the following:
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
});
</script>
The first line of the jQuery script assures that the document is ready before it applies the CSS and fades in. The second line applies the CSS style to hide the body so we can use jQuery to fade the page in. The third line calls the jQuery method to fadeIn the body over 2 seconds (feel free to play with the timings and see what you like).
Now, if we fire up our browser we can see the new transition in action! But if we click on any of the links, our site disappears like normal. Wouldn't it be nice to have a subtle fade effect when visitors leave one page to go to another? Let's hook that function up.
First, let’s apply a special class on the links we wish to create a fade out effect.
<a href="otherPage.html" class="transition">LINK</a>
Now, if we go back to our HTML, we can modify our script to get some great looking jQuery fades.
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
Now, we’ve asked our jQuery script to listen for visitors that click on anchors with a class of transition. If a visitor does click on it, the script immediately cancels the browser redirect, then saves the destination URL in a variable called linkLocation. We then fade out the body of the page over a second, but also pass a second argument that requires the redirectPage function to be called when the animation is completed. The redirectPage function just serves to redirect the browser after the content of your page fully fades out.
Fine Tuning
That’s it! You have everything all set up and you’re ready to rock and roll! But there are a couple of things to mention. These page fades will look much better if you set a specified background color for the html tag similar to the color of your site’s background color in your CSS. This means when the body fades in and out, there is still a color similar to the existing background you have.
html {
/*If you had a black or close to black background*/
background-color: #000000;
}
Also, it’s not a bad idea to externalize this script. Remove the script from your HTML and put it in its own .js file and then attach it the same way you did for the jQuery file (but it must be attached after). It’s always a good practice to keep content, presentation and interaction separate.
Here’s a quick look of how my files are organized.
Also, if you want to have all links from your page fade-out, you don’t need to specify which ones to have the transition class; we can just make all your links create the fade. To do this, just replace the third line of the script, changing the jQuery selector from $("a.transition") to just $("a") and remove all the “transition” classes from your anchors.
Conclusion
Using this page fade can make your site stand out as very few sites use this technique. However, be careful to keep the transitions subtle. Used correctly, this jQuery gem will polish and make your site stand out.
Although it might look pretty good to see, I personally don't really like it. It delays the speed users navigate through the website. Maybe you can preload the next page during the animation, so only the loading time will be reduced?
Otherwise, a good example!
I agree with you macro delays the speed could be mean losing some visitor
Nice technique.
In firefox though if you click on the back button the previous page doesn't load.
It's a nice idea but I agree with Marco, i don't think it's great for the users flow.
Your images don't exist at the URL you gave them:
http://net.onextrapixel.com/wp-content/uploads/2010/02/jquery-transitions.jpg
The 'net' in this case should be replaced with 'www'.
Hi Jaryl,
http://net.onextrapixel.com is correct. It is our CDN. If you are not viewing the images, you might want to try clearing your cache. ;)
Not just in Firefox, in Chrome and Safari if you click on the back button the previous page doesn't load. I've tried to make it works even we click on the back button by adding display:none property on the body :
body {
font-size: 62.5%;
font-family: Arial, Verdana, Helvetica, sans-serif;
background: #333;
color: #fff;
display: none;
}
And put the fadeIn function in the displayPage function to put on the addEventListener function :
function displayPage() {
$("body").fadeIn(2000);
}
window.addEventListener("load", displayPage, false);
window.addEventListener("unload", displayPage, false);
Thanks for the solution. It works!
1 additional point will be adding
$("body").css("display", "none"); into the displayPage() function.
function displayPage() {
$("body").css("display", "none");
$("body").fadeIn(2000);
}
So that even if visitors have their JavaScript disabled, they will still be able to see the body content.
OK, great!
nb: for this to work, don't add "display: none;" in the css page for the body{}
It looks weird in Chrome.
Right now, the content flashes for a second, then after the JavaScript is loaded it gets hidden only to fade in again. Not really ‘slick’ if you ask me :p Why not use an anti-FOUC measure?
Awesome share.. very nice effect.
Really? You're just replying with a link to your low-cost site. Petty.
How would you go about using this instead of a smooth scroll... I have about a dozen divs within a page that are hidden, I'd like to use this effect just for those links...
Just replace body with the div id and ad a link with a click function:
$(document).ready(function() {$("#id-of-hidden-div").css("display", "none");
$("#id-of-link-to-div").click(function() {
$("#id-of-hidden-div").fadeIn(2000);
});
});
Nice, but if the client have disable js, the body is empty :S:S:S
Just think for one second... disabling javascript is almost as useful as disabling images.
Why disable images? Really load time these days is not an issue.
Why disable javascript? The only time I ever do this is if I find a site that refuses to reveal it's sources. Other then that?
So: "client have disable js?" not likely, but if so do you really care to cattier to these clients with such poor web standards. Or maybe we are all better off without.
Virtually nobody disables javascript anymore. The average user doesn't even know how to do it and if a person does have javascript disabled, they're navigating with a very particular purpose that requires it. Anyone who disables their javascript is smart enough to know (or by now has realized) that they are not going to have a full web experience. We really can't worry about that stuff anymore.
...like it!
Not bad, but it could be easily improved by assigning $('body') to a variable and referencing the variable on subsequent instances. That will cache the result of the selector, meaning that you'd only be looking up the value one time instead of three like you are doing in this script.
Tried it out - but with the flickering and back button breaking I can't use it. I saw it on another site a few weeks ago but couldn't remember where.
So nice job but needs more fine tuning.
At http://www.shaynekelly.com I did something similar, and added a unonload hook to deal with the back button. Not perfect either.
Stephan
I think we can use this effect as an alternative for page loader effect,
maybe you can add more effect to this ( not just fade in / out ), it will be more interesting
cheers
Great plugin. Uniquely to favorites! Thanks
Works great, ive been looking everywhere on how to do this.. Is there anyway to stop the white flash between page changes?
thanks alot
mark
Great Job...
Thanks
Hi Dave,
how is it possible that the page transition on your own website:
http://www.onetwentyseven.com/
works like a charm?
I tried to find out how you managed not to fire the fadeIn-transaition unless the whole content is loaded, but failed. I think this is needed to prevent the short flash displaying the sites content before fading in.
Beyond that you managed the issue with the back button.
Could you please give me/us a short advise?
Thanks a lot.
Haha I remember in 1999 / 2000 This was pretty popular.. they even had some extension for dreamweaver just for this ^^
hello,
giving a css display:none value you risk to be detected by google as hiding content. So from the SEO point of view it can be harmful.
I don't know if actually googlebot reads inside javascript code, but if not, it will do it soon.
You should use a more solid alternative, for example the JQuery animate function with parameters : opacity 0 and animation length 0 milliseconds.
LOMAO! That's funny. 1st Google uses this same technique on their own site, so they're not going to kick you for having a display:none.
In fact Google bots will not flag you for this unless the content within the div is suspicious (keyword stuffing). The only way you get banned for hiding content in most cases is if a live Google moderator happens upon your link and sees you are abusing this method. Google posted something about this a few years ago.
Google don't need to optimise their site for Google.
How do you make the BG fade in, as well???
Thanks ladies and gents...
Hey everyone!
This code works great in google chrome, but in safari and firefox is you navigate away from the page and hit the browsers back button, you get presented with a white page.
So i used .bind unload like this:
$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").css("display", "none");
$("body").fadeIn(1000);
--- rest of the code ---
});
Works like a charm in both firefox and safari.....or at least for me.
hope this helps someone.
Cheers!
Revision:
Works an looks good in safari and firefox, but flickers like crazy in chrome.
To solve the flickering i changed my code like this:
$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").css("overflow", "hidden")
$("body").hide();
$("body").fadeIn(1000);
--- rest of the code ---
});
Thanks Marius!
I have the whole site loading with the fade effect now. And it's sweet!!!
However, I'm having a little trouble when the initial (home) page loads. When it loads, the actual page will flicker, disappear, then fade in...
My code for the script (linked externally) is as follows:
________________________________________________
$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").css("display", "none");
$("body").hide();
$("body").fadeIn(700);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(700, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
______________________________
What does anyone recommend for this problem or are we going to have to live with it? It only does it sometimes, not always...
Hey Tim!
Glad i could help.
I had a little test page where i played with the effect. Later, after i posted the code above, i saw that if you have a bigger page that doesn't fit your display, the $("body").css("overflow", "hidden") is going to cut the page to fit your display and disable the browsers scroll.
So, try replacing $("body").css("display", "none"); in your code
with
$("body").css("overflow", "scroll")
That worked for me, the hole page is shown and no white flickering, hope it works for you as well.
Cheers!
Cool! I actually want the scrollbar on there at all times so there is no page shifts when going to another page.
This effect doesn't seem to be working with spry tooltips either. Don't know why. Can you possibly help me with that?
You guys are so helpful thanks a bunch...
Tim
Hey Tim,
Sorry, can't help you with spry, but you could try one of the numerous jquery tooltip plugins.
Ex:
http://flowplayer.org/tools/tooltip/index.html
or
http://craigsworks.com/projects/qtip/
Cheers!
Hey, this works great except for the flicker!
Am I missing something in my code?
jQuery(window).bind("unload", function() {});
jQuery("body").css("overflow", "hidden")
jQuery("body").hide();
jQuery("body").fadeIn(2000);
jQuery("a").click(
function(event){
event.preventDefault();
linkLocation = this.href;
jQuery("body").fadeOut(1000, redirectPage);
}
);
function redirectPage() {
window.location = linkLocation;
}
Also has anyone been able to make this work on IE8?
Working fine. really nice for my application, thanks
Hello and thanks for the script… works great without mootools. I am not a js expert but, can you help me to stop de conflict with mootools ?
regards
@Greg
Just call jQuery.noConflict(); after all the libraries are loaded.
Ex:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery.("body").hide();
.......rest of the code......
});
or you can do something like this:
var $J = jQuery.noConflict();
$J(document).ready(function(){
$J.("body").hide();
.......rest of the code......
});
This doesn't work in IE 7 or 8. Ideas?
True that this script won't work with IE.
Also, somehow, and I've tested alot of different things with the html- and body tag, the backgrond image won't fade. On the 127site the background image does fade.
And, the flicker is still there. Any suggestions, anyone?
Since Amri asked, "Any suggestions, anyone?" ... here's an idea that occurred to me. Probably a bit of an effort to implement.
Link clicks are not changed. But the HTML returned to the browser depends on the referrer field in the HTTP header. This field tells you which page the visitor is currently viewing.
The server sends back the HTML belonging to the currently viewed page (even for the new page!) and also HTML for the new page. Also added is javascript to switch/fade from the old page to the new page.
So:
* User visits some page on the site: no special action.
* User clicks on link on the site that goes to a page within the site: Server responds with HTML that contains both HTML for the previously viewed page and HTML for the new page. Javascript switches/fades from old to new HTML.
I think this could be very robust for all browsers.
Hope this is understandable, if not, I'll try to explain a bit more.
Stephan
Nice suggestion Stephan.
Sounds like a sound and solid idea.
Any code to try what you are suggesting?
I'm not a coder...
Amri
Amri, demo might take me a month or two; kind of busy with other stuff. -- Stephan
Ok Stephan. I know what you mean. It's three am saturday morning and I'm still working... ;)
Though, if your programming skills can be hirable I am open to suggestions. Though I am not in a hurry. Would be a neat thing to see it in action. :-)
Cheers
Amri
(It's actually Amrit, but my t was missing in my first post)
Dave, you've made me the happiest man in southern Spain this afternoon. I was desperate searching in google how to implement a fadeout effect on a web I'm buliding... and suddenly I found your article.
THANK YOU!!!
I love this idea, but i dont know how to apply it to frames. For example, i have a navigation bar and when i click on a link, I want the other frame (content frame) to fade out, how would I accomplish this? I tried a few things, but it made the navigation frame fade out, and then when the transition was done, i got the content to load in the right frame, but it deleted the navigation frame.
Just realized after using this gem, that I need the effect on all links, except for external ones, eg. all with target="_blank", or using another jQuery call to open the external links in a new window.
Is there any way I can add this script to all links like this:
$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").css("display", "none");
$("body").hide();
$("body").fadeIn(700);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(700, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
And then somehow exclude the links with a class of external, or a target set to _blank?
Demo down?
Thanks for this. Works great except I could not kill the white flicker without building a separate jquery animation js to handle fade-ins and used yours only for the fade outs. Not sure why, but IE is (as always) the one that makes you work hard!
I've got a perhaps better method of fading in a page.
Load the page with a width&height 100% black square + the site under it. Then you can use PHP to check if the user has js enabled.
Check if the user has javascript on, if so, fade the box out and display:none it when finished fading.
If js is disabled, then... you might be able to use PHP to remove the box.
Haven't tested this. But, I would think that fading a box out, rather than fading the body tag would be more efficient, less cpu intensive.
Whit this script works a little better with that IE blsht
$(document).ready(function() {
$("body").css("display", "none");
$("img").css("display", "none");
$("body").fadeIn(1000);
$("img").fadeIn(1000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
$("img").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
Thank you so much for this!
Grinning ear to ear : )
Any one managed to fix the flickering, it would makes this perfect
Useful jquery transitions.Thanks
For Fast Loding Your Pages Use Hidden Div And Ur Pages As Inline frame in hidden div
Its Works For Me No Extra Time Need For Loading Every Pages...
Sorry For My English
Winline India
my problem is exactly same as jeff's. how to apply it to frames. For example, i have a navigation bar and when i click on a link, I want the other frame (content frame) to fade out, how would I accomplish this? I tried a few things, but it made the navigation frame fade out, and then when the transition was done, i got the content to load in the same navigation frame,and it deleted the navigation frame.
Hi, Thanks!
What fixed the flicker for me is having a container div fade instead of body, while body still has the background.
$(window).bind("unload", function() {
});
$("#page").css("display", "none");
$("#page").hide();
$("#page").fadeIn(700);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#page").fadeOut(700, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
Like this effect but had major problems with original code.
Then read posts from Marius and got things working a lot better using this code:
$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").hide();
$("body").fadeIn(700);
$("a.fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(700, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
Website I am currently testing on has background styled in html tag so did not have same problems with white flashes.
Marius' suggestion of adding "jQuery("body").css("overflow", "hidden")" did cause problems with adding scroll bars where not needed. Also had problems with lightbox script problems that the noConflict command did not solve.
Finally arrived at the solution by changing to "a.fade" and adding "fade" class to all links except slideshow and a popup link.
Now getting good results in all browsers (except IE). Will Try Daniel Medi idea next.
I suspect best fix will be suggestion to wrap everything in a div tag. However, I have just finished rewriting site to HTML5 and am overjoyed to have pages without one single div!
I have tried this it fixed my lightbox issues but the page won't fade out only in. Any idea how to fix this?
I was worried that for random periods of long loading (large mysql query or high server load etc.) user might be wondering what was going on with plain white screen.
Instead of fading out the body, fade out the div wrapper and insert an absolutely positioned loading GIF above it in the code - which will display behind it on the page. This means that on fade out the loading GIF fades in and fades back out on the next page loading in:
Yes the CSS is mixed in blah, blah - it's just for ease of reading:
You can position it how you like, I just happened to have a fixed layout and used left/top positioning.
Z-index's ensure that the gif is underneath. Z-indexes require a positional style to be declared. Also make sure your #wrapper has a background set so the loading.gif doesn't just show through it.
This is my two penneth - there are obviously plenty of cleaner ways etc. - this was just to show the general idea of having a loading GIF behind the faded out div.
Hope it helps someone
am looking for something like this, but instead of fade in, can i get slide in option (i know there is a jquery for slide in page effect, but it need single page) anyway to get slide in style in multiple page website ?
it's great but if i create a DIV with a position absolute, doesn't work in Internet Explorer ! I didn't know why !
Someone have a solution?
Thx!
Yoan.
ps: sorry for my english...
I have the same problem !
I don't know why .. just another confirm of how IE sucks.
Thank you really great!
But the links with an anchor from one page to another page does not work ...
Any idea? Solution?
Thank you in advance
Ps: machine translation ... I'm french ...
Can you set up a transition to show a page for a few seconds then transition to the next page, kind of like Apple does on their website now?
Hi.
Anyone who figured out a good way to do this for only parts of the website? (I dont want the header to fade)
Awesome tutorial. Simple solution that adds a great spice
Hi,
I solved the IE flickering by putting a {style="display:none"} on the div I was trying to use the fade in/fade out. It worked perfectly. Not sure if it will work if you are trying to use it for the body though. Maybe you can try it.
Neither the original FadeIn code nor the myriad variations presented here in the comments work in IE9.
I've been scouring the web all day and can't find any way to get a page to fade in on IE9. Even the old IE-only page transition filters and DXImageTransform meta tags that used to work in IE5.5 - IE8 are no longer supported in IE9.
Your page transition FadeIn code works great in FF, Safari and Chrome. I would really appreciate a solution for IE9 though, since I'm sure most of my users will be on IE9 soon.
Hi
Like the effect,
Want to use it to sway out DIVs
I don't know what I am doing..... bit of an issue....
Has anyone doene this and could post their html and js please?
Rodney
Does this work in a frame?
Ok, so first, I'm glad I stumbled upon this site!
But I put the code in a site I'm developing and it's working, but the background image isn't fading. Is there a way to make it fade in and out as well?
Thanks,
Jim
How would one insert a loading gif image in between the transitions?
This is genius.
This was truly a fantastic tutorial. Just wanted to express some thanks!
Thanks for your tutorial..! Greetings from holland
I think this is a rather clunky way to do it, although I see no other way.
If the page is served slowly, you're going to see the site load, and as soon as the javascript kicks in, it hides the page, and fades in. That's confusing to say the least.
Using a page transition in conjunction with ajax page loading is more suitable, as seen on http://dna.co.nz/.
Really useful, just what I was searching for. Thanks !
So, Sam, I checked out that page scroll at DNA.
Really slick stuff. :-)
Any chance you know what they are using?
I peaked in their code, but I am not shure what is used for what, not completly anyhow, and without some examples and som explanations on how to get it working I probably can't figure it out.
Would be really cool if there is a source code for that project. Couldn't find any though... :-(
Well the system they are using is Silverstripe, so I imagine what they've made is fairly tightly knitted in with that, with the Ajax page loading.
The simple algorithm would just be, onclick of link with a class "ajaxSlide", get href of the link, slide content area to the left 100%. Use href to request the new page html, once the new html has been loaded, set content area position to 100% right and slide in to the middle again.
The actual mechanics of it though, is probably quite complex.
You can find out if a request is Ajax or not. In this case, if it's an Ajax request, it should only send the new content. If not Ajax (js not enabled), send the whole page HTML, header and footer etc. In Silverstripe it's quite easy to do that.
i got error in Opera :(
I'm the developer responsible for DNA.co.nz
The Ajax transitions aren't silverstripe code. Although the CMS does allow for different or modified templates depending on whether request is Ajax or not. To view the JavaScript go to http://DNA.co.nz/themes/Base/js/ajax.js
JOHN you are an absolute BOSS.
Thanks for that.
Also the only people who use opera are web developers testing in opera. ;)
Hi, I want to do the same thing with a drupal 7 website. By default Jquery is installed in the drupal core. By creating a script.js file and by adding this code :
// jQuery for Drupal 7 [BEGIN](function ($) {// [jQuery BEGIN]$(document).ready(function() {// ****************************************************************/* jQuery code here */// ****************************************************************// [jQuery END] });// jQuery for Drupal 7 [END]}(jQuery));
What about the jquery code ? Any idea?
Thanks
Perfect code, exactly what i was looking for... For guys who say that the delay is too long, just change the value in brackets (i did so: $("body").fadeIn(800); and $("body").fadeOut(500, redirectPage); )
hi, this works in joomla 1.6?
Hello ALL,
In JQuery fadeTo () method used to fade element on page. In this article I am trying to show you, how we can implement fadeTo method on the page. For example I have two images on page and I want to images fade from page to given opacity.......................... for more details please check out the following link.......
http://mindstick.com/Articles/4d2acc55-de69-48d3-a92b-5277b81fbeea/?JQuery%20fadeTo%20method
Thanks !!!!!!!!
Hello! The script works beautifully but I have a question. The website I am creating has an iframe. The links on the main page will change everything within the iframe while the main page is constant. I want to be able to click a link on the main page and let ONLY the iframe fade out/in.
How is that possible?
$('a').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('iframe').fadeOut(400, function() {
iframe.attr('src', href).fadeIn(400);
})
})
Something like that?
Hi, I use the script in my front page http://www.astrolisto.com/ and I like it a lot.
And I found a way to not have blank screen after someone click the back button in his browser and it works in browsers IE, Firefox, Chrome. Don't work in Opera.
What I done is to insert a line (that I found here http://www.computing.net/answers/webdevel/refresh-a-page-once/196.html ) in function redirectPage() of the custom.js
function redirectPage() {
if (location.href.indexOf('reload')==-1) location.replace(location.href+'?reload');
window.location = linkLocation;
}
I don't know why, but it works !
Also in my main.css I have add in the body display: none;
body {
....
display: none;
}
as mentioned above to not have the flash in IE when load the page.
Hi all,
First of all thanks for showing How to Use jQuery to Make Slick Page Transitions.
I want to run this transition effect during a page change using a "time in" and "time out".
For Ex. 1st page is up for 20seconds and after 20 seconds it fades out to 2nd page like in the demo.
But this script only allows me to change into the second page using the "click" function and "mouse over" function.
can anyone help me to overcome this issue.
Thanks in Advance :)
Thanks, we were looking for something like this for our website
About the " When it loads, the actual page will flicker, disappear, then fade in..."
I think this happens because window.load is triggered/run after jQuery.ready().
So when we bind the effect to load we don't get the disired effect.
Mayby a javascript expert can comment on the difference of Window.load and jQuery.ready?
Hi! I am new creating websites and love this plug in. I had a question. I notice this only works with Text as the link or Image. If I'm already using javascript hover to an image and would like my image to be the button to trigger this affect how can I do that?
I like this effect, but I am not so sure how it stacks up against sites with horizontal jquery transition animations. A few good examples of websites that make use of that type of jquery enabled page transitions are the following:
http://www.spcservicesinc.com/
http://www.newpathcapital.com/
Guys!!! I need help please. I'm using this plug in but my problem is when I use it as a class the page wont fade out, only fade in the new page. If I change (a.transition) to only (a) on the third line then it works. But my problem is it then disables my pretty photo effect that i have links to. How can i get the fade out to work with the class option (a.transition)?
This whole Jquery thingy is not working for me. I'm gonna go through wordpress.
Do we have ay verision that changing pages automatically? currently works whenever you clcik, is it possible to change it to Auto?
My page still flickers before fading in for a little bit... has there been a definite fix for this yet? Otherwise this isn't useful!
Thanks!
Working great for my test "intro" page.
I find solution for auto load timing script.
I try many days for "code it" but nothing to do...
Can anyone ?
TY in Adv
how i add image loader ... between fade
Good one, good tutorial to understand better the jQuery, there are so much things in jQuery. Thanks you!
While I truly enjoy this tutorial and will probably deploy this technique in the future, this method is not viable for websites that are already heavily loaded with content. The very simple solution is to:
1) Create a tag in your style sheet for the HTML element.
2) Add the attributes from your body tag, like your background image and or your background color.
Like this ...
html {
background-color: #ddd;
background-image: url(images/bg.jpg);
}
That’s it. Hit refresh! This workaround works in ALL browsers, even the troublesome Chrome but of course it seems to work best in FireFox.
Hi All,
This is a superb example. However I need same effect with slide right to left effect. Please help if any one have solution or reference link.
Just require if click on the left nav full page need to slide and new page will come and if previous page again clicked in nav then it need to slide back.