Fading effect when loading page


/ Published in: jQuery
Save to your folder(s)

A proper fade-to-background effect with jQuery, without caching problems.\r\n\r\nAmalgamation from different sources and help found on stackoverflow:\r\nhttp://stackoverflow.com/questions/3628459/jquery-page-transition-and-browser-history\r\nhttp://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button/201406#201406


Copy this code and paste it in your HTML
  1. //on top of page
  2. $.ajaxSetup ({
  3. // Disable caching of AJAX responses */
  4. cache: false
  5. });
  6.  
  7. //fire jQuery when hitting the back button
  8. history.navigationMode = 'compatible';
  9.  
  10. //page effects
  11. $("body").css("display", "none");
  12. $("body").fadeIn(1500);
  13. $("a.transition").click(function(event){
  14. event.preventDefault();
  15. linkLocation = this.href;
  16. $("body").fadeOut(500, function() {
  17. window.location = linkLocation;
  18. });
  19. });
  20.  
  21. ---
  22.  
  23. <body onunload=""> <!-- property to fix bfcache for firefox 3.5 -->

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.