Using Jquery fadeout for page transition

Question

Hello and thank you in advance for any solutions. I've been trying to add a fade in and fade out function when users are switching through pages. I have tried many solutions found here and on other forums but none of it seems to work for the fade out. The fade in works just fine I just had to add .ghostly to the body tag. Nothing I have done has worked for the fadeout. Any help would be greatly appreciated as I'm fairly new to 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>

Answer 1

1. Fadeout firing immediately!

When you click the anchor, the next page will start loading and any code on the current page will cease. You have incorrectly covered that situation by not waiting for the fadeOut to finish! You need to wrap that call in an anonymous function,

e.g.

$("body").fadeOut(1000, function(){redirectPage(linkLocation)});

otherwise you are simply calling redirectPage immediately and passing its return value to the fadeOut method!

Option: An alternative transition method, is to use Ajax for loading of all pages. Then you can apply any effect you want (you can do that generically in your anchor click event handler). This requires you update the browser history as the pages change, but is very effective (you can transition pages by any means then).

2. Ajax loading:

You can do something like this to replace the 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() to combine the animation promise and the Ajax call. When both complete, it processes the data from the Ajax page load and replaces the entire body of the page.

*Note: This will not load the page in the link due to a 'Access-Control-Allow-Origin' error, but should work fine within your own website.

3. Put most jQuery code in document ready:

Any jQuery code that accesses "existing" elements needs to go in the document ready (that is elements you assume are already loaded. In this 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 at the end of body to get a similar effect, but it makes for less portable code (especially when the code is in separate .js files... which it often will/should be to improve caching).

4. Or use a deferred event handler:

If you use deferred event handler you can do this instead:

<script>
    $(document).ready(function() {
        $('.ghostly').animate({
            opacity: '1'
        }, 3000);
    });

    // Catch all anchor clicks bubbled to the 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 by listening for events at an ancestor element that does not change (e.g. document in this case, as it is already present), then use the jQuery selector to match elements, then call the function for any matching elements that caused the event.

5. Notes:

I would also recommend you use this shortcut for document ready anyway:

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

or better yet (to avoid namespace clashes with $):

jQuery(function($){
     // Your code using the local $ here
});

This second version is the best catch-all as this document ready passing a reference to jQuery as the first parameter. Note: Although it looks similar this is not an IIFE (immediately invoked function expression) that you sometimes see wrapping jQuery code.

6. Final recommendation:

Put that all together and you get 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)});
    });
});