Javascript html淡入子页面并更改URL[更新]

是否可以在后台加载新的子页面，更改URL并在上一个站点的动画正在进行时淡入

下面是一段非常简单的动画：

$(document).ready(function() {
    'use strict';
    $('.r').on('click', function() {
        var preWidth = $('.l').width(),
            menuWidth = $('.r').width();
        $('.l').animate({
            left: '-' + preWidth
        }, 2000, 'easeOutQuad');
        $('.r').animate({
            left: menuWidth
        }, 2000, 'easeOutQuad', function() {
            $('.page').css({
                visibility: 'hidden'
            });
        });
    });
});

它就像一扇滑动门。它应该是这样工作的：

按右侧的

div

2

div

s滑到侧面

在背景中，幻灯片动画正在进行时，新页面正在淡入

新页面完全可见，URL也会更改

我希望我的解释容易理解，希望你能帮助我。祝你今天愉快

更新：

首先，我的浏览器中的“后退”按钮有问题。我无法加载带有动画的第一页“loader.html”，因此我编写了一个

if

查询来检查变量的状态。有没有更好的办法

window.addEventListener（'popstate'，函数（f）{
var bprsd=f.状态；
如果（bprsd==null）{
bprsd=“loader.html”；
}
如果（bprsd=“loader.html”| |“”）{
bprsd=null；
location.reload（）；
}
});

链接到测试站点
是和否

是的，这是可能的，但不符合你的结构。
您需要使用$加载其他页面。加载：

var url="test.html";
$(document).on("click",function(){
  //todo fadeout
  $(document.body).load(url);
   location.pushState({},"MySite",url);
  //todo fadein
  });

url="newtest.html";

我在发布动画链接时犯了一个错误：感谢您编辑我的帖子。这对于加载html非常有效，但是有没有办法也将URL更改为“newpage.html”？也许我解释错了。div应该像一个链接一样工作（更改URL）。看看位置。非常感谢，这对我来说很有用！我把一个测试网站上传到了一个网站上。集成了
pushState（）
函数，并添加了带有popstate的eventlistener。