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淡入淡出效果转移到另一个页面

回答

相关问题