使用jquery在頁面之間淡出

我試圖用Jquery將過渡效果添加到我的網站。一切正常，但突然之間，網站開始閃爍一次，在淡出效果之前...我添加display:none，它被解決了。但是，如果訪問者禁用JavaScript，他們將無法查看該網站。我已經將它添加爲腳本，但它不起作用...任何想法？這裏是我的褪色代碼：使用jquery在頁面之間淡出

<!--transition--> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      $("body").css("display", "none"); 
      $("img").css("display", "none"); 

      $("body").fadeIn(2000); 
      $("img").fadeIn(2000); 

      $("a.link").click(function(event){ 
      event.preventDefault(); 
      linkLocation = this.href; 
      $("body").fadeOut(1000, redirectPage); 
      $("img").fadeOut(1000, redirectPage); 
     }); 

     function redirectPage() { 
      window.location = linkLocation; 
     } 

     }); 
    </script>

來源

2015-08-21 André Mata

你應該給樣式表中的元素顯示：none。就像你現在所看到的那樣，這些元素將是可見的，然後只會在jquery開始加載時纔會隱藏 –

@CláudioBarreira添加顯示：無論如何，樣式表都不會阻止Javascript被禁用的人進行優雅的回退，據我所知題。 – user3154108

如何用CSS3淡入（這將解決您的問題與JS禁用），然後用jQuery做淡出。 –

您只能使用CSS進行轉型褪色，就像這樣：

body { 
    animation: myfadeInAnimation 2s; 
} 
div { 
    width: 300px; 
} 
@keyframe myfadeInAnimation { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 
@-webkit-keyframes myfadeInAnimation { 
    from {opacity: 0;} 
    to {opacity: 1;} 
}

Here is the JSFiddle demo

至於淡出的效果，如果瀏覽器將不會運行javascript，您將無法檢測到窗口卸載並觸發其效果...

來源

2015-08-21 10:45:59

謝謝，它完美的作品。它是否與所有瀏覽器兼容？ –

是的，動畫屬性是由大多數主流瀏覽器支持:) –

爲禁用JavaScript：您可以將它添加到你的頁面，因此用戶將無法看到任何東西，而不是一個空白頁和一個有用的消息

<noscript> 
     Javascript is not enabled on browser and require this to be enabled to function properly. 
     Here are the <a href="http://www.enable-javascript.com/" target="_blank"> 
     instructions how to enable JavaScript in your web browser</a>. 
     <!-- <meta http-equiv="refresh" content="0;url=http://www.enable-javascript.com/">--> 
      <style type="text/css"> 
      div.container { display:none;} 
      </style> 
</noscript>

假設每一件事情是你的容器

內

來源

2015-08-21 10:47:18

我已經想過添加，但網站是爲我的客戶。所以我更喜歡一個解決方案，並不意味着他們的一部分沒有看到該網站馬上...
謝謝無論如何，我會嘗試其他選項，如果他們不工作，我將不得不去這個。 .. –

使用jquery在頁面之間淡出

回答

相關問題