Animation

on initialisation of jHistory you can define two functions: "fnOnStart" and "fnOnLoad"

"fnOnStart" will execute on starting the request (on link click).
The duration parameter (miliseconds) is the minimum time for the animation.
If the server gets an earlier response "fnOnLoad" only executes when the durationtime is over.

"fnOnLoad" will execute and get the content when the server request is given.
The function gets the content and selectors to display it. The duration parameter (miliseconds) is the minimum time for the animation.
Other requests (link clicks) will execute after the current duration time is over.

Example Configuration

This options configuration will slide a layer from top to bottom and after loading has finished back from bottom to top.

var j = new jHistory({elementSelector : ['#content'], 
             fnOnStart: {duration: 500,
             render: function (url, container) {
                         $('body').append("<div id ='Load_Layer' style='display: none; background-color: #336666; position: fixed; top: 0; left: 0; width: 100%; height: 100%;'></div>");
                          $("#Load_Layer").slideDown(500);
                     }
             },
         fnOnLoad: {duration: 500,
             render: function (url, selectors, content) {
                         $(selectors).each(function(i, selector){
                             $(selector).html(content.find(selector).html());
                         });
                         $("#Load_Layer").slideUp(500, function(){$('#Load_Layer').remove();});
                     }
             },
     });

Animations using overlayer

SlideIn

show
fnOnStart:

{duration: 500,
 render: function (url, container) {
             $('body').append("<div id ='Load_Layer' style='display: none; background-color: #336666; position: fixed; top: 0; left: 0; width: 100%; height: 100%;'></div>");
            $("#Load_Layer").slideDown(500);
        }
}

fnOnLoad:

{duration: 500,
 render: function (url, selectors, content) {
            $(selectors).each(function(i, selector){
                $(selector).html(content.find(selector).html());
            });
            $(document).scrollTop(0);
            $("#Load_Layer").slideUp(500, function(){$('#Load_Layer').remove();});
        }
}

FadeIn

show
fnOnStart:

{duration: 500,
 render: function (url, container) {
             $('body').append("<div id ='Load_Layer' style='display: none; background-color: #336666; position: fixed; top: 0; left: 0; width: 100%; height: 100%;'></div>");
            $("#Load_Layer").fadeIn(500);
        }
}

fnOnLoad:

{duration: 500,
 render: function (url, selectors, content) {
            $(selectors).each(function(i, selector){
                $(selector).html(content.find(selector).html());
            });
            $(document).scrollTop(0);
            $("#Load_Layer").fadeOut(500, function(){$('#Load_Layer').remove();});
        }
}

Quader from left Top

show
fnOnStart:

{duration: 500,
 render: function (url, container) {
             $('body').append("<div id ='Load_Layer' style='opacity: 0.4; background-color: #336666; position: fixed; top: 0; left: 0; width: 1%; height: 1%;'></div>");        
             $( "#Load_Layer" ).animate({
                 width: "100%",
                 height: "100%",
                 opacity: 1,
                 }, 500 );
        }
}

fnOnLoad:

{duration: 500,
 render: function (url, selectors, content) {
            $(selectors).each(function(i, selector){
                $(selector).html(content.find(selector).html());
            });
            $(document).scrollTop(0);
            $( "#Load_Layer" ).animate({
                 width: "0%",
                 opacity: 0.4,
                 }, 500 , function(){$('#Load_Layer').remove();});
        }
}

Waiting animation

show
fnOnStart:

{duration:0,
 render:function(url, container){
             $('body').append("<div id ='Load_Layer' style='opacity: 0.8; background: #336666 url(images/ajax-loader.gif) no-repeat 50% 50%; position: fixed; top: 0; left: 0; width: 100%; height: 100%;'></div>");
        }
}

fnOnLoad:

{duration: 0,
 render: function (url, selectors, content) {
            $(selectors).each(function(i, selector){
                $(selector).html(content.find(selector).html());
            });
            $(document).scrollTop(0);
            $('#Load_Layer').remove();
}

Content Animations

slide

show
fnOnStart:

{duration:0,
 render:function(url, container){
             $('body').append("<div id ='Load_Layer' style='opacity: 0.8; background: #336666 url(images/ajax-loader.gif) no-repeat 50% 50%; position: fixed; top: 0; left: 0; width: 100%; height: 100%;'></div>");
        }
}

fnOnLoad:

{duration:500,
 render:function(url, selectors, content){
           $('#Load_Layer').remove();

            $newContent = $("<div></div>");
            $newContent.html(content.find(selectors[0]).html());
            $newContent.insertAfter(selectors[0]);
            $newContent.css("position","fixed");
            $newContent.css("width","100%");
            $newContent.css("left",$(window).width() +"px");
                 
            $(selectors[0]).css("position","fixed");
            $(selectors[0]).css("width","100%");

            $newContent.animate({
                 left: "0px",
                 }, 300, function(){$newContent.attr("style","")});
            $(selectors[0]).animate({
                 left: "-" + $(window).width() +"px",
                 }, 300, function(){$newContent.attr("id", $(this).attr("id")); $(this).remove(); });
        }
}