jQuery 地址 - 动画内容

Posted 2023-05-07

【中文标题】jQuery 地址 - 动画内容

【英文标题】：jQuery Address - Animate content

【发布时间】：2012-05-21 21:32:23

【问题描述】：

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

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

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

所以我的问题是，有人知道如何为内容设置动画（淡出/淡入）并显示/隐藏加载屏幕吗？我认为这并不难，但 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'));
);

【参考方案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() 函数，因为您必须将其应用于任何新链接（可能已加载）--> 使用 delegate/on（不知道您使用的是哪个 jQuery 版本使用) 代替;)

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

【讨论】：

首先，非常感谢您的帮助。这是一个开始，现在我必须在当前的 jquery.settings.js 中实现你的 github 示例看起来不错，但对我来说很难编写代码..

那么..？如果没有“那么”，您介意将问题标记为已回答吗？ :)

很抱歉，我的评论尚未完成时按了 Enter 按钮。有关完整代码的外观的任何建议（使用 jquery.address.settings？我不是确定将代码放入我当前代码的位置

只需将它用作您的loadURL 函数 - 其他一切都应该保持不变;) 基本上如果应该加载某些东西 loadURL() 被触发 --> 它会淡出内容，然后淡入占位符并加载请求的内容 - 如果加载了这些内容，它将再次淡出占位符，获取 #content 元素并再次显示它；）

听起来很棒！ ..会试一试..如果是解决方案，我会将其标记为已接受的答案；）