Fade Out between pages

[Rugg]

Hello… I was curious if anybody knew how to fade out content during a transition to a new page.

Example Link
(Click on any of the page links at the top)

http://www.stylodesign.co.uk/

Thank You

[lyleyboy]

That will be javascript.

1, On click fade the page elements out.
2, Get JS to redirect to the new page.

[Chris Coyier]

$(“body”).fadeOut();

That’d be jQuery fading out the page…

I understand that’s not much info =/ I’ll be releasing a little framework that is very similar to this, only for slides, very soon.

[soap]

See below post…

[soap]

By the way, if you are wanting to fade pages IN as well, you’ll want to set the body’s display:none in the jquery and fadeIn().. Holla

$(document).ready(function() {

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

$('body').fadeIn(1000);



$('.link').click(function() {

event.preventDefault();

newLocation = this.href;

$('body').fadeOut(1000, newpage);

});

function newpage() {

window.location = newLocation;

}

});

What this does is sets the body to not display, then fades it in.

Then once you click a link which you have deemed worthy of making the page fade out, it first prevents the default, which is instantly going to that link, and sets the variable new Location to be the href attribute of the currently clicked link. Then the body fades out and after the fade out it calls function newpage().

Try that puppy out.

Sorry I have a bit too much fun when it comes to js/jquery, I’m still learning myself so it’s a learning experience for both of us!

[stavroch]

Do you have any news or tutorial of how can I have fade in – fade out between web pages?

[tomscustoms]

I know this is an old thread but I couldnt help notice the code that was posted… Everything soap posted will work perfectly fine for what youre trying to do, he just forgot to pass the event object.

The code below should get you the effect you were looking for:

$(document).ready(function() {

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

$('body').fadeIn(1000);



$('.link').click(function(event) {

event.preventDefault();

newLocation = this.href;

$('body').fadeOut(1000, newpage);

});



function newpage() {

window.location = newLocation;

}

});

If you notice, the only difference in the code above and what soap posted was on the line with

$('.link').click(function() {

it should have read

$('.link').click(function(event) {

Hopefully this helps someone out in the future :)

[bultala]

Dear tomscustoms, thanks for the update. I have not been able to get the FadeOut work at all! When a button is clicked, current page immediately disappears (doesn’t fadeout) and the new page nicely fades in. Have you tested above code? is there a way to fix it? Thanks.

[kakaramz]

hai guys, how to transitions page using slide effect ? thanks

[DanH]

Hi bultala,

I was just playing around with the code and I think I know what you’re looking for to make the page fade out when the link is clicked to go to another page – you just need to add the class=”link” to your “a” tag in the html.

see where tomscustoms wrote this line of code:

$(‘.link’).click(function(event)

it could have been written like this as well:

$(‘a.link’).click(function(event)

the “.link” is the class that needs to be added to any “a” tag(s) in your html that you would like to execute the fade out function while leaving the current page.

[jail1]

Yeah , well I don’t quite recommend doing this for an enterprise project or a blog or an e-commerce website. Crap, I don’t recommend doing this at all. If the user doesn’t have JS enabled there is NO content for him what-so-ever. It is always good to have a fallback. So you can use modernirz to set the display to visible if there is no JS active.

[wahhabb]

Another disadvantage of this type of transition is that it adds nearly two seconds to each page transition. There is plenty of research showing this will greatly reduce user retention. If you want to do this sort of thing, a better approach is to use Ajax to load the new page content. If the basic page layout is the same, you can simply replace the content area, using a fade-out/fade-in, with the chrome staying intact. You can read about doing this at http://blog.fraser-hart.co.uk/how-to-ajaxify-your-website-with-ajaxify-and-history-js/ and there is a WordPress plugin that you can use at https://wordpress.org/plugins/advanced-ajax-page-loader/. It’s a bit more complex, because you need to a) update history, so the back button works, b) update the URL, so the user can save a page to favorites, c) deal with page title, d) possibly update breadcrumbing or menu highlighting. But it creates a vastly better user experience than the conventional flashing of loading a new page.

[jail1]

Yes! Exactly. You dont want dom manipulation with jquery for smth like this. AJAX technology is a way better solution. Future-proof, present-proof, past-proof lol, and on top of that you can customise the data injection the way you want.

[wired420]

To get this to work with other code I had to change one line. Changing this one line made it interchangeable with my other modules and packages. Don’t see where it would hurt for anyone else to use it either for compatibility sake. It will also work if you say set a whole div or li in a menu bar to be a link or hover element.

This line

newLocation = this.href;

Was replaced with this one

newLocation = $('.link a').attr("href");

For a final code

$(document).ready(function() {
  $('body').css('display', 'none');
  $('body').fadeIn(1000);
  $('.link').click(function(event) {
    event.preventDefault();
    newLocation = $('.link a').attr("href");
    $('body').fadeOut(1000, newpage);
  });
  function newpage() {
    window.location = newLocation;
  }
});

[Beverleyh]

Just planting this here for future reference as you can achieve a nice fadein with CSS alone nowadays (IE10+ and modern browsers).

.content { -webkit-animation:fadein 0.7s; animation:fadein 0.7s }
@-webkit-keyframes fadein { from {opacity:0} to {opacity:1} }
@keyframes fadein { from {opacity:0} to {opacity:1} }

[Author]

Posts