CODEWITHSUNDEEP
javascriptjqueryhtmltransition
James Mitchell
James Mitchell

Reputation: 2467

How to load pages with added jQuery

I've noticed many websites (like Hulu.com), have very interesting page transitions. They manage to fade out of a page and into a new one.

How would this be accomplished with jQuery/Javascript. Would I somehow have to link a .js to both web pages? How would I do this?

Upvotes: 0

Views: 57

Answers (2)

Jason Sperske
Jason Sperske

Reputation: 30416

You could do this with a combination of PushState part of the History API (pjax is an excellent way to add this to an existing site) and jQuery. This is how github handles it (try browsing folders of source code, and look at the URLs). What pjax lets you do is intercept any <a> click before the page redirects, fetch the page that would load via ajax, insert the HTML in your page (which you can control with jQuery animations like fadeIn()) and the update the browser URL so the page can be bookmarked.

Upvotes: 1

Dave Hogan
Dave Hogan

Reputation: 3221

No need for a .js reference on both pages, just the page before. There are many plugins for jQuery that support most transitions.

This looks like a pretty comprehensive list, although 2010 dated. http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

Upvotes: 0

Related Questions