淡出锚点并淡入href
[英]fade out on anchor click and fade in href
问题描述
I would like to know if it is possible to make fadings between two HTML-Documents. 
我想知道是否可以在两个HTML文档之间进行淡入淡出。 I have a few HTML-Pages but let's make an example with two of them. 我有一些HTML页面，但让我们用其中的两个示例。
index.html, jobs.html
On both I have a menu with <a> buttons. 两者都有一个带有<a>按钮的菜单。 What I want to do is: 我想做的是：
I click on <a href="jobs.html" id="jobs">Jobs</a> and index.html (which I am currently on) fades out and jobs.html fades in. Something like fading between div s but with a whole HTML document. 我单击<a href="jobs.html" id="jobs">Jobs</a>然后index.html （我目前正在使用）淡出，而jobs.html淡入。类似于div之间的褪色，但与整个HTML文档。
Any helps is much appreciated. 任何帮助深表感谢。
4 个解决方案
解决方案1
4 已采纳 2013-08-02 14:25:41
- Hide the body using css. 使用CSS隐藏身体。
- Fade in the body 淡入体内
- Click a button and grab its ID 单击一个按钮并获取其ID
- Fade out the body 淡出身体
- Navigate to the new url 导航到新网址
<!DOCTYPE html>
<html>
<head>
<style>
body{
display: none;
}
.myBtn{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(function(){
$('body').fadeIn();
$('.myBtn').click(function(){
url = $(this).attr('id') + '.html';
$('body').fadeOut(function(){
window.location = url;
});
});
});
</script>
</head>
<body>
<h1>index.html</h1>
<div class="myBtn" id="index">index</div>
<div class="myBtn" id="jobs">jobs</div>
</body>
</html>
http://jsfiddle.net/Dp4Hy/ http://jsfiddle.net/Dp4Hy/
PS. PS。 obviously the fiddle won't work, as you're trying to navigate to a new page, but you can still see the fade in at the beginning, and fade out when you click a button. 显然，当您尝试导航到新页面时，小提琴将无法工作，但是您仍然可以看到开始时会逐渐淡出，而单击按钮时会逐渐淡出。 Just need this script included for all pages to use. 只需包含此脚本即可供所有页面使用。
解决方案2
1 2013-08-02 14:25:21
Bottom line, this is not possible without some kind of pre-loading and interaction with a server side component 最重要的是，如果没有某种预加载并与服务器端组件进行交互，这是不可能的
I would personally recommend PJAX. 我个人会推荐PJAX。 http://pjax.heroku.com/ It allows you not only catch an event and load a document based on the event, it updates the browser state, url, title, the back button works, etc. http://pjax.heroku.com/它不仅允许您捕获事件并基于该事件加载文档，而且还可以更新浏览器状态，URL，标题，后退按钮等。
example sites that use it to accomplish similiar behavior http://bleacherreport.com/articles/1716958-the-top-10-fantasy-qbs-for-2013 http://reciperehab.com/blog/post/the-6-best-salads-for-spring 使用它来完成类似行为的示例网站http://bleacherreport.com/articles/1716958-the-top-10-fantasy-qbs-for-2013 http://reciperehab.com/blog/post/the-6-春天的最佳沙拉
*disclaimer, I did the second one... *免责声明，我做了第二个...
解决方案3
1 2013-08-02 14:34:16
Create your anchor tag and set a javascript onclick event. 创建锚标记并设置javascript onclick事件。 Call your fadeOut() function (which i've pasted below) You'll want it to fade out when you click, and when the next page loads, you'll want it to fade in: 调用您的fadeOut（）函数（我在下面粘贴了该函数），您希望它在单击时淡出，而在下一页加载时，您希望它淡入：
jsfiddle: http://jsfiddle.net/HmGap/3/ jsfiddle： http : //jsfiddle.net/HmGap/3/
HTML: HTML：
<script type="text/javascript">
window.onload=function(){fadeIn('body')};
</script>
<div id="body">
Content <br /><br />
<a onClick="fadeOut('body')" style="cursor:pointer">Click Me to Fade Out</a>
</div>
Javascript: Javascript：
//fadeEffects // fadeEffects
var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element){
var target = document.getElementById(element);
target.style.display = "block";
var newSetting = fade_in_from / 10;
target.style.opacity = newSetting;
// opacity ranges from 0 to 1
fade_in_from++;
if(fade_in_from == 10){
target.style.opacity = 1;
clearTimeout(loopTimer);
fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')',100);
}
function fadeOut(element){
var target = document.getElementById(element);
var newSetting = fade_out_from / 10;
target.style.opacity = newSetting;
fade_out_from--;
if(fade_out_from == 0){
target.style.opacity = 0;
target.style.display = "none";
clearTimeout(loopTimer);
fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')',100);
window.location.href = "link.html";
}
解决方案4
0 2013-08-02 14:23:07
是的，有可能，您可以在DIV中附加html（如您所知），也可以使用iframe来管理iframe广告代码的淡入
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.