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);
    });
}

这背后的逻辑是使您的页面作为缓冲区工作。然后隐藏要淡入的元素，从正文中删除该类并淡化所有内容。

更新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" />标记来完成此操作这背后的想法是修复评论中由theazureshadow描述的禁用的javascript问题。

Answer 2

你得到了所谓的“无格式内容的闪光”或FUC。您可以将第二页包装在一个容器中，然后通过css（display: none;）隐藏它，然后在加载时淡入。

Answer 3

不要使用纯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');

如果需要，您可以更具体，并将隐藏样式定位到要隐藏的特定元素。但我不知道这对你的案例是否实用 - 细节太少了。

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

3 个答案: