Advanced Search

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

Expand | Embed | Plain Text

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.