javascript - Using Jquery fadeout for page transition -

hello , thank in advance solutions. i've been trying add fade in , fade out function when users switching through pages. have tried many solutions found here , on other forums none of seems work fade out. fade in works fine had add .ghostly body tag. nothing have done has worked fadeout. appreciated i'm new coding.

<script src="http://code.jquery.com/jquery-latest.js"></script> <style>     .ghostly {         opacity: 0;     } </style> <script>     $(document).ready(function() {         $('.ghostly').animate({             opacity: '1'         }, 3000);     });     $("a").click(function(event) {         event.preventdefault();         linklocation = this.href;         $("body").fadeout(1000, redirectpage(linklocation));     });      function redirectpage(link) {         document.location.href = link;     } </script> 

1. fadeout firing immediately!

when click anchor, next page start loading , code on current page cease. have incorrectly covered situation not waiting fadeout finish! need wrap call in anonymous function,

e.g.

$("body").fadeout(1000, function(){redirectpage(linklocation)}); 

otherwise calling redirectpage and passing return value fadeout method!

option: alternative transition method, use ajax loading of pages. can apply effect want (you can generically in anchor click event handler). requires update browser history pages change, effective (you can transition pages means then).

2. ajax loading:

you can replace entire page:

jsfiddle: http://jsfiddle.net/trueblueaussie/bwdwc/3/

jquery(function ($) {     $('.ghostly').animate({         opacity: '1'     }, 3000);     $(document).on('click', "a", function (event) {         event.preventdefault();         $.when($("body").fadeout(4000).promise(), $.ajax({             url: this.href,             type: 'get',             datatype: 'html'         })).done(function (html) {             var newdoc = document.open("text/html", "replace");             newdoc.write(html);             newdoc.close();             $("body").css({                 display: "none"             });             $("body").fadein(4000);         });     }); }); 

it uses $.when() combine animation promise , ajax call. when both complete, processes data ajax page load , replaces entire body of page.

*note: this not load page in link due 'access-control-allow-origin' error, should work fine within own website.

3. put jquery code in document ready:

any jquery code accesses "existing" elements needs go in document ready (that elements assume loaded. in case 'a' = all anchors).

e.g.

$(document).ready(function() {     $('.ghostly').animate({         opacity: '1'     }, 3000);     $("a").click(function(event) {         event.preventdefault();         linklocation = this.href;         $("body").fadeout(1000, redirectpage(linklocation));     }); }); 

you can put jquery code @ end of body similar effect, makes less portable code (especially when code in separate .js files... will/should improve caching).

4. or use deferred event handler:

if use deferred event handler can instead:

<script>     $(document).ready(function() {         $('.ghostly').animate({             opacity: '1'         }, 3000);     });      // catch anchor clicks bubbled document...     $(document).on('click', "a", function(event) {         event.preventdefault();         linklocation = this.href;         $("body").fadeout(1000, redirectpage(linklocation));     });      function redirectpage(link) {         document.location.href = link;     } </script> 

deferred event handlers work listening events @ ancestor element not change (e.g. document in case, present), then use jquery selector match elements, then call function matching elements that caused event.

5. notes:

i recommend use shortcut document ready anyway:

$(function(){      // code here }); 

or better yet (to avoid namespace clashes $):

jquery(function($){      // code using local $ here }); 

this second version best catch-all document ready passing reference jquery first parameter. note: although looks similar not iife (immediately invoked function expression) see wrapping jquery code.

6. final recommendation:

put , this:

jquery(function($) {     $('.ghostly').animate({         opacity: '1'     }, 3000);     $(document).on('click', "a", function(event) {         event.preventdefault();         linklocation = this.href;         $("body").fadeout(1000, function(){redirectpage(linklocation)});     }); });