CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
user2457563
user2457563

Reputation: 171

How do I create animated page transitions between different pages?

Say I have the pages:

test1.html test2.html test3.html

And I want to link test1.html to test2.html and test1.html to test3.html

Using page anchors and iframes, I had the issue that when going from test1 to test3, it scrolled through test2 also.

I found something cool called jquery mobile page transitions (http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html) but everytime it would tell me could not load page. This is however exactly what i want. Different page transitions (i can choose between sliding top, left, down, etc.) for each button/link i want to create.

If there's a way to do this in CSS that would be awesome!

Upvotes: 1

Views: 16793

Answers (2)

Robert McKee
Robert McKee

Reputation: 21487

Not exact code, but should get you started.

$(document).ready(function(){
  $('body').fadeIn();

  $('a').click(function(e){
    window.goto=$(this).attr("href");
    $('body').fadeOut('fast',function(){
      document.location.href=window.goto;
    });

    e.preventDefault();
  });
});

CSS:

body{display:none;}

Just be aware that if you are using other jQuery plug-ins that need to know an element's height that they will likely break because the element won't have a height until the fadeIn is complete. You might be able to get around this by using visible:hidden instead of display:none to do the initial hiding.

Upvotes: 1

SergkeiM
SergkeiM

Reputation: 4168

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ Take a look here loading with ajax with Slide Down You can work a little bit this Tutorial to load the whole Page as drop down or fadeIn. Only with CSS I think it is not possible.

Upvotes: 1

Related Questions