jquery之新页面预加载后，如何在卸载时为页面设置动画 (jQuery)

我正在尝试在加载新页面时以动画方式输出页面。我想要的效果类似于此网站 http://www.whitefrontier.ch/ 上使用的过程。 。我更像是一名设计师而不是开发人员，所以我在这方面运气不佳。以下是我尝试过的两个我认为最接近正确的解决方案。我意识到在那个网站上，他们使用 fancybox 作为预加载器。我需要 fancybox 才能获得所需的结果吗？

  $(window).load(function() { 
    $('a').animate({right: '250px'},"slow"); 
  }); 
 
$(window).on('beforeunload', function(){ 
  $('a').animate({right: '250px'},"slow"); 
}); 

请您参考如下方法:

为什么不使用页面预加载器而不是使用 $.unload() 呢？这是必须加载大型静态资源(如视频或大图像)的网页的常见设计模式。您可以像这样设置页面预加载器:

//example js 
//Show your web page once all the assets are fully loaded 
$(window).load(function() 
{ 
  $('#preLoader').hide();  //Or whatever animation you want to remove the preloader 
  $('#pageWrapper').show(); //Or whatever animation you want to show the page 
 }); 
 
<!-- Example HTML --> 
<div id="preLoader"> 
  <h1>Loading.....</h1> 
</div> 
<div id="pageWrapper" style="display:none;"> 
  [page content goes here] 
</div>