新页面预加载后如何在卸载时为页面设置动画（jQuery）答案

【问题标题】：How to animate a page on unload, after new page has preloaded (jQuery)新页面预加载后如何在卸载时为页面设置动画（jQuery）
【发布时间】：2015-04-24 05:10:37
【问题描述】：

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

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

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

【问题讨论】：

解决这个问题的一个很好的资源：@987654322@。这显示了解决问题的两种不同方法。
fancy box 用于显示图片幻灯片。

标签： jquery animation onbeforeunload

【解决方案1】：

为什么不使用页面预加载器而不是使用 $.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>

【讨论】：