使用jquery重定向頁面之間的平滑過渡

我試圖在重定向用戶時獲得平滑過渡。首先淡出頁面，然後重定向和淡入。使用jquery重定向頁面之間的平滑過渡

這裏是我的重定向

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？

來源

2011-04-12 ganjan

更新我的文章，希望用可重複使用的解決方案。告訴我它是如何工作的:) – Khez 2011-04-12 04:18:22

一個簡單的修復到這將是：

CSS

body{ 
    display:none; 
}

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秒了大量的時間用於網絡用戶。基本上花費額外6s來移動到另一個頁面對於您的用戶羣來說可能是非常昂貴的。我希望你提供一個沒有這些影響的解決方案。

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

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

這背後是爲了讓你的網頁的工作作爲一個緩衝地帶的邏輯。然後，您隱藏你想淡入，從身上取出類和淡入的一切元素。

UPDATE 2013年9月1日

我看到這個答案仍產生一些流量，我不得不承認，因爲在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問題。

來源

2011-04-12 03:48:29 Khez

隱藏任何你想用javascript顯示的css是一個壞主意。 – theazureshadow 2011-04-12 04:01:53

我正在修改我的答案，'display：none'仍然在閃爍，因爲他想要黑色背景。請原諒。 – Khez 2011-04-12 04:07:44

如果他們沒有啓用javascript，他們會用css隱藏內容，但無法用javascript顯示。空白頁;困惑的用戶。我更喜歡我的解決方案，只隱藏他想要隱藏的元素，並將其餘部分正常加載。 – theazureshadow 2011-04-12 04:24:30

你會得到所謂的「無風格內容的閃光燈」或FUC。你可以將第二頁包裝在一個容器中，並通過css（display: none;）將其隱藏，然後在加載時淡入。

來源

2011-04-12 03:47:34 Jason

其實它叫做[FOUC]（http://en.wikipedia.org/wiki/Flash_of_unstyled_content）。只是說... – Khez 2011-04-12 03:51:35

糟糕的主意，用CSS隱藏它。 – theazureshadow 2011-04-12 04:00:40

@theaszureshadow用css隱藏它並不是一個壞主意。這是2011年，幾乎每個人都打開了javascript。即使大多數移動瀏覽器現在也支持JS。真的沒有其他辦法可以避免FOUC（謝謝khez）。您使用javascript添加類的解決方案也不會阻止FOUC，因爲您仍然必須等待JS下載然後執行，除非您將JS加載到文檔頭部，這意味着您將所有內容向上。 – Jason 2011-04-12 07:45:31

不要最初使用純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');

如果您願意，您可以更具體一些，並將隱藏樣式定位到您要隱藏的特定元素。但我不知道這是否適合您的情況 - 太少的細節。

來源

2011-04-12 04:00:23 theazureshadow

使用jquery重定向頁面之間的平滑過渡

回答

相關問題