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

是否可以在后台加载新的子页面，更改URL并在上一个站点的动画进行时淡入？
这里是动画的an example (jsFiddle)，非常简单：

$(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。
2divs滑向两侧。
幻灯片动画正在进行时，背景中的新页面正在淡入。
新页面是完全可见的，并且URL会更改。
我希望我的解释容易理解，希望你能帮助我。祝你有美好的一天。
更新：
首先，我的浏览器中的后退按钮有问题。我无法用动画加载第一页“loader.html”，所以我编写了一个if查询来检查变量的状态。有更好的办法吗。
window.addEventListener('popstate', function(f){ var bprsd = f.state; if(bprsd == null){ bprsd = "loader.html"; } if(bprsd = "loader.html" || " "){ bprsd = null; location.reload(); } });
链接到测试站点link

最佳答案

是和不是。
是的，这是可能的，但不是你的结构。
您需要使用$加载另一页。加载：

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

url="newtest.html";