使用jquery重定向时页面之间的平滑过渡 [英] smooth transition between pages when redirecting with jquery

问题描述

当我重定向用户时，我试图获得平稳过渡。首先淡出页面，然后重定向和淡入。

这是我的重定向

  if（data.redirect！= undefined）
 {
 $（＃toppanel）。slideUp（1000）; 
 $（＃content）。fadeOut（2000，function（）{
 window.location = data.redirect; 
}）; 
  

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

  jQuery（function（$）{
 $ b $（div.container_16）。first（）。hide（）; 
 $（。grid_16）。first（）。hide（）; 
 $ b $（div.container_16）。first（）。fadeIn（2000）; 
 $（ .grid_16）。first（）。slideDown（4000）; 
  

毫秒，第二页加载然后变成空白并淡入。我该如何解决这个问题？我需要更改css还是html吗？ 解决方案 div>

一个简单的解决方法是：

CSS

  body {
 display：none; 
} 
  

JS

  jQuery（function（$）{
 $（' （）; 
 $（div.container_16）。first（）。hide（）; 
 $（。grid_16）。first（）。hide（）; 
 $（div.container_16）。first（）。fadeIn（2000）; 
 $ （ .grid_16\" ）第一（）了slideDown（4000）。; 
} 
  

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

更新

CSS

  / * 
 * overflow =>所以你不会得到一个滚动条
 * visiblity =>所以所有内容都隐藏了
 * background =>所以你得到一个黑色的背景
 * / 
 
 .bodyExtra {
 overflow：hidden; 
能见度：无; 
背景：＃000; 
} 
  

JS

  jQuery（function（$）{
 $（document）.ready（function（）{
 $（div.container_16） hide（）; $ b $（'body'）。removeClass（'bodyExtra'）; $ b $（。grid_16）。第一个（）。fadeIn（2000）; 
 $（。grid_16）。first（）。slideDown（4000）; 
}）; $ b $（div.container_16 b} 
  

这个逻辑背后的逻辑是让你的页面作为缓冲区工作。元素，你想淡入，从体内删除类，并淡化所有内容。

UPDATE 2013.09.01

我看到这个答案仍然会产生一些流量，我不得不承认，自从2011年的初步答案以来，我还有一个额外的做法：

HTML / CSS

 < noscript> 
< style type =text / css> 
 .bodyExtra {
溢出：auto！important; 
知名度：visibile！important; 
} 
< / style> 
< / noscript> 
  

这也可以通过< link rel =样式表 type =text / csshref =no-js.css/> 标签。

背后的想法是修复由theazureshadow描述的禁用JavaScript问题评论。

I am trying to get a smooth transition when I redirect users. First by fading out the page then redirecting and and fadeIn.

Here is my redirect

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

My next page has a javascript in the header like this:

jQuery(function ($) {

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

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

This almost work except for a few milli sec where the second page loads then turns blank and fades in. How do I fix this? Do I need to change the css or html?

解决方案

A simple fix to this would be:

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

You should know that 1 second is a lot of time for a web user. And basically taking 6s extra to just move to another page could be very costly to your user base. I hope you offer a solution without these kind of effects.

UPDATE

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

The logic behind this is to make your page work as a buffer zone. You then hide the elements you want to fade in, remove the class from body and fade everything in.

UPDATE 2013.09.01

I see this answer is still generating some traffic and I have to admit, since the initial answer in 2011, I have an addition to make

HTML/CSS

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

This can also be done with a <link rel="stylesheet" type="text/css" href="no-js.css" /> tag.
The idea behind this is to fix the disabled javascript issue described by theazureshadow in the comments.

这篇关于使用jquery重定向时页面之间的平滑过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！