jQuery淡入淡出效果轉移到另一個頁面

我想設置加載頁面，我設置超時到5秒，然後移動到index.html頁面。我想轉移到這個頁面，一些基本的淡入淡出過程，我想知道我該怎麼做？jQuery淡入淡出效果轉移到另一個頁面

我目前的代碼是：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title> Go Post - HomePage </title> 
     <link rel="stylesheet" href="includes/style.css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script> 
      setTimeout(function(){ 
       window.location='index.html'; 
      }, 3000); 
     </script> 
    </head> 

    <body> 
     <div class="load"></div> 
    </body> 
</html>

來源

2016-02-12 drorAlfasi

謝謝！我像你說的那樣做了。 – drorAlfasi

你可以簡單的jQuery淡出做到這一點。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title> Go Post - HomePage </title> 
     <link rel="stylesheet" href="includes/style.css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <!-- Import jquery --> 
     <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
     <script> 
      setTimeout(function(){ 
       $('html').fadeOut(
        500, // animation time 
        function(){ 
         // action will do after the animation 
         window.location='index.html'; 
        } 
       ); 
      }, 3000); 
     </script> 
    </head> 

    <body> 
     <div class="load"></div> 
    </body> 
</html>

來源

2016-02-12 16:51:52

嘗試以下

在HTML中添加格

<div id="preloader"> 
</div>

jQuery的

$(function() { 

    setTimeout(function() { 
    $('#preloader').fadeOut('slow', function() { 
     window.location = "https://google.com"; 
    }); 

    }, 5000); 

});

CSS：

div#preloader { 
    background: url("http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif") no-repeat scroll center center #000000; 
    height: 100%; 
    position: fixed; 
    width: 100%; 
    z-index: 999; 
}

演示：http://codepen.io/anon/pen/gPqLPX

來源

2016-02-12 16:55:11 Thangaraja

jQuery淡入淡出效果轉移到另一個頁面

回答

相關問題