Full Web Page Easing with jquery

I've been trying to understand how to implement a full page ease... How do you call or tell the script the order of tags I want to ease into the page? Do I need to use a body loa开发者_如何学Cd function?

Many thanks.

Erik

Here is a tutorial for fading in and out when you change pages: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

If you want to have the pages "bounce" in and out, you can setup your website to be contained in div tags on the same page and simply "ease" them in and out like a slideshow.

CSS --

.panel{
    float: left;
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
}

HTML --

<div id='div1' class='panel'>Page 1</div>
<div id='div2' class='panel'>Page 2</div>
<div id='div3' class='panel'>Page 3</div>
<div id='div4' class='panel'>Page 4</div>
<div id='div5' class='panel'>Page 5</div>

JavaScript --

$(document).ready(function () {
    var left = 0;
    var width = $(window).width();
    var easing_type = 'easeOutBack';

    $(window).resize(function() {
        initialize_all();
    });

    initialize_all();

    function initialize_all() {
        left = 0;
        width = $(window).width();
        $("#div1").css({
            left: 0 + "px"
        });
        $("#div2").css({
            left: width + "px"
        });
        $("#div3").css({
            left: 2 * width + "px"
        });
        $("#div4").css({
            left: 3 * width + "px"
        });
        $("#div5").css({
            left: 4 * width + "px"
        });
    }

    function move_forward() {
        left -= width;
        if (left  0) {
            left = -4 * width;
        }
        $("#div1").animate({
            left: left + "px"
        }, transition_time, easing_type);
        $("#div2").animate({
            left: left + width + "px"
        }, transition_time, easing_type);
        $("#div3").animate({
            left: left +2 * width + "px"
        }, transition_time, easing_type);
        $("#div4").animate({
            left: left +3 * width + "px"
        }, transition_time, easing_type);
        $("#div5").animate({
            left: left +4 * width + "px"
        }, transition_time, easing_type);
    }
});

This was a simple attempt at a slideshow I had tried, you will need to include the jquery easing plugin but then you can choose from like 30 different easing types.