Forums

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.

Rugg

Ok…I am not very strong with JS, Could you possibly help me a bit more please.

Thank You

chriscoyier

$("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!

Rugg

Hey Thanks…I will give a try soon and let you know how it pans out…seems to look strong.

Rugg

Interesting…for some reason the page loads and then the fade comes in to effect, instead of fading into the next page…

stavroch

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

Rugg

@stavroch try this script…good luck!

http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

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.

treehouse : what would you like to learn today?

Forums

[Solved] Fade Out between pages