Question

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

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

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

Answer 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>

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

1 个答案: