jQuery地址-动画内容

Question

I'm trying to get an AJAX website with the jquery.address plugin

if you take a look at http://www.idbranding.nl the deep-linking works fine.

The only problem is i can't achieve a loading screen simular like: http://www.nerisson.fr/ (also uses the jquery.address plugin)

So my question is, does anybody knows how to animate the content (FadeOut/FadeIn) and show/hide a loading screen? I think it ain't hard but the documention of jquery.address is limited when it comes to animation.

Here's my code:

function loadURL(url) {
    console.log("loadURL: " + url);
    $("#content").load(url);
}       

// Event handlers
$.address.init(function(event) {
    console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
    $("#content").load($('[rel=address:' + event.value + ']').attr('href'));
    console.log("change");
})

$('a').click(function(){
    loadURL($(this).attr('href'));
});

Answer 1

maybe something like this as the load function:

$("#content").fadeOut("fast", function() { //block of code to be executed when page is faded out
    $("#loadingPlaceholder").fadeIn("fast"); // fade in placeholder (e.g. loading image)
    $.get(url, function(data){ // get the data and if data has been loaded...
        $("#loadingPlaceholder").fadeOut("fast"); // fade out placeholder
        $("#content").empty().html(data).fadeIn("fast"); // empty the innerHTML (--> prevents "flickering"), insert the loaded data and fade in again
    });
});

furthermore I wouldn't use the click() function, as you would have to apply it to any new links (that may be loaded) --> use delegate/on (don't know which jQuery version you're using) instead ;)

For a more detailed example check my version https://github.com/peter-m/blueprint/blob/master/js/pushState.js