javascript在页面之间淡入淡出
[英]javascript fade between pages
问题描述
first of all i'm pretty new with JS. 
首先，我对JS很陌生。 I'm buillding a website and it has a intro. 我正在建立一个网站，并且有一个介绍。 This intro animation have to be placed in a different page and after it ends then the next webpage will be automatically loaded. 此简介动画必须放置在其他页面中，结束后，将自动加载下一个网页。
<body onload="setTimeout(
function(){
window.location.href = 'file:///C:/Users/skatto/Desktop/art%20contest/art_contest_page.html';
}, 32000 )">
this is the script i'm using on my html file to automatically load the next page, but it's pretty 'sharp' and rough, how could I add a fade animation? 这是我在html文件中用来自动加载下一页的脚本，但是它非常“锐利”且粗糙，如何添加淡入淡出动画？ To make it smoother 使它更平滑
2 个解决方案
解决方案1
0 2016-12-07 11:21:52
A simple CSS can do this. 一个简单的CSS可以做到这一点。 why use scripts? 为什么要使用脚本？ Add the animation fadeIn to any body of page you want to fade in before load. 将动画fadeIn添加到要在加载之前淡入的页面的任何正文中。
body { animation: fadeIn 0.5s linear; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
<div> Something <br/>Something <br/>Something <br/>Something <br/>Something <br/>Something <br/>Something <br/>Something <br/>Something <br/>Something <br/>Something <br/>Something <br/>Something <br/>Something <br/>Something <br/>Something <br/> </div>
解决方案2
0 2016-12-07 11:36:08
Try like this 这样尝试
on page 1: 在第1页：
<a href="otherPage.html" class="transition">LINK</a>
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.