使用 jquery 重定向时页面之间的平滑过渡

Question

我正在尝试在重定向用户时实现平稳过渡。首先通过淡出页面然后重定向和淡入。

这是我的重定向

if ( data.redirect != undefined )
{
        $("#toppanel").slideUp(1000);       
        $("#content").fadeOut(2000, function() {
        window.location = data.redirect;
    });

我的下一页在标题中有这样的 javascript：

jQuery(function ($) {

    $("div.container_16").first().hide();
    $(".grid_16").first().hide();

    $("div.container_16").first().fadeIn(2000);
    $(".grid_16").first().slideDown(4000);

这几乎可以工作，除了几毫秒，第二页加载然后变成空白并淡入。我该如何解决这个问题？我需要更改css或html吗？

Answer 1

一个简单的解决方法是：

CSS

body{
    display:none;
}

JS

jQuery(function ($) {
    $('body').show();
    $("div.container_16").first().hide();
    $(".grid_16").first().hide();
    $("div.container_16").first().fadeIn(2000);
    $(".grid_16").first().slideDown(4000);
}

您应该知道 1 秒对于网络用户来说是很长的时间。基本上，多花 6 秒才能移动到另一个页面，这对您的用户群来说可能是非常昂贵的。我希望您提供一个没有这些影响的解决方案。

更新

CSS

/*
 * overflow => so you don't get a scrollbar
 * visiblity => so all content is hidden
 * background => so you get a black background
 */

.bodyExtra{
    overflow:hidden;
    visibility:none;
    background:#000;
}

JS

jQuery(function ($) {
    $(document).ready(function(){
        $("div.container_16").first().hide();
        $(".grid_16").first().hide();
        $('body').removeClass('bodyExtra');
        $("div.container_16").first().fadeIn(2000);
        $(".grid_16").first().slideDown(4000);
    });
}

这背后的逻辑是让你的页面成为一个缓冲区。然后隐藏要淡入的元素，从 body 中删除类并淡入所有内容。

更新 2013.09.01

我看到这个答案仍然产生了一些流量，我不得不承认，自从 2011 年的初始答案以来，我还有一个补充

HTML/CSS

<noscript>
    <style type="text/css">
        .bodyExtra{
            overflow:auto !important;
            visibility:visibile !important;
        }
    </style>
</noscript>

这也可以使用<link rel="stylesheet" type="text/css" href="no-js.css" /> 标签来完成。
这背后的想法是修复 cmets 中 theazureshadow 描述的禁用 javascript 问题。

Answer 2

不要原来使用纯css来隐藏内容。如果您这样做，关闭 JavaScript 的用户将看不到您的内容。而是仅在 javascript 可用时隐藏。

.js-enabled div.container_16,
.js-enabled .grid_16 {
  display: none;
}

在正文的最顶部包含这行 javascript：

$(document.body).addClass('js-enabled');

然后在你的动画函数中，在你隐藏.grid_16 之后，包含这一行以恢复正常：

$(document.body).removeClass('js-enabled');

如果您愿意，您可以更加具体，并将隐藏样式定位到您想要隐藏的特定元素。但我不知道这对你的情况是否实用——细节太少了。

Answer 3

您将获得所谓的“无样式内容闪存”或 FUC。您可以将第二页包装在容器中并通过 css (display: none;) 将其隐藏，然后在加载时淡入。