Question

我正在尝试使用jquery.address插件获取AJAX网站

如果您查看http://www.idbranding.nl深层链接工作正常。

唯一的问题是我无法实现类似的加载屏幕：http://www.nerisson.fr/（也使用jquery.address插件）

所以我的问题是，有人知道如何动画内容（FadeOut / FadeIn）并显示/隐藏加载屏幕吗？我认为这并不难，但是当谈到动画时，jquery.address的文档是有限的。

这是我的代码：

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

可能像加载函数一样：

$("#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
    });
});

此外，我不会使用click()函数，因为您必须将其应用于任何新链接（可能已加载） - ＆gt;使用delegate / on（不知道你正在使用哪个jQuery版本）;）

有关更详细的示例，请查看我的版本https://github.com/peter-m/blueprint/blob/master/js/pushState.js

jQuery地址 - 动画内容

1 个答案: