WordPress站点jQuery AJAX页面过渡失效求助：动画中断、无响应

嘿，作为JS/jQuery新手能折腾出页面过渡效果已经很棒了！咱们来一步步排查你代码里的问题，搞定这个卡住的情况：

问题根源分析 #

你的代码里有几个关键问题导致了动画卡住、站点冻结：

1. addClass不支持回调函数：原生jQuery的addClass()方法并没有回调参数（只有引入jQuery UI时才支持），所以你写的$("#content").addClass('slide-out', function () { ... })里的回调根本不会执行——这就导致内容永远不会被替换，slide-out类也不会被移除，动画就停在半路上了。
2. 缺少AJAX错误处理：如果AJAX请求失败（比如网络问题、页面不存在），整个流程就会中断，加上你阻止了默认跳转，用户点击导航后就完全没反应了。
3. 未处理浏览器前进后退：你用了pushState修改URL，但没监听popstate事件，用户点击浏览器的前进/后退按钮时，页面内容不会更新，体验也会出问题。

修正后的代码 #

我帮你调整了代码，修复了这些问题，同时保留了你的核心需求：

// 确保只绑定一次点击事件，避免重复绑定
$("#site-navigation a").off('click').on("click", function (event) {
    event.preventDefault();
    var href = $(this).attr("href");
    
    // 更新URL
    window.history.pushState(null, null, href);
    
    // 更新导航激活状态（取消注释启用）
    $("#site-navigation li").removeClass("current-menu-item");
    $(this).parent("li").addClass("current-menu-item");
    
    // 触发动画
    $("#content").addClass('slide-out');
    
    // 监听动画结束事件（根据你的CSS动画类型选transitionend或animationend）
    $("#content").one('transitionend', function() {
        // 发起AJAX请求
        $.ajax({
            url: href,
            success: function (data) {
                // 提取新页面的#content内容
                var newPage = $(data).filter("#content").html();
                // 更新内容
                $("#content").html(newPage);
                // 移除动画类，触发反向过渡（如果需要）
                $("#content").removeClass('slide-out');
            },
            error: function() {
                // 请求失败时，移除动画类并跳转到原URL
                $("#content").removeClass('slide-out');
                window.location.href = href;
            }
        });
    });
});

// 处理浏览器前进/后退
window.addEventListener('popstate', function() {
    var currentUrl = window.location.href;
    $.ajax({
        url: currentUrl,
        success: function (data) {
            var newPage = $(data).filter("#content").html();
            $("#content").html(newPage);
            // 同步导航激活状态
            var currentPath = window.location.pathname;
            $("#site-navigation a").each(function() {
                if ($(this).attr("href") === currentPath) {
                    $("#site-navigation li").removeClass("current-menu-item");
                    $(this).parent("li").addClass("current-menu-item");
                }
            });
        },
        error: function() {
            window.location.href = currentUrl;
        }
    });
});

额外注意事项 #

• 动画事件选择：如果你的slide-out用的是CSS过渡（transition属性），用transitionend；如果是关键帧动画（@keyframes），换成animationend。
• WordPress的AJAX注意点：确保你的目标页面能正常返回完整的HTML，因为我们是用filter("#content")提取内容的。如果某些页面的#content结构不一样，可能需要调整选择器。
• 事件委托优化：如果你的导航是动态生成的（比如AJAX加载后更新），可以把事件绑定到父元素上，比如$("#site-navigation").on("click", "a", function(event) { ... })，这样就不用每次更新后重新绑定了。

内容的提问来源于stack exchange，提问作者Jacopo Marcolini