DIV内容淡入/淡出混乱
[英]DIV content fade in/out confusion
问题描述
I have searched through StackOverflow posts and various forums, but cannot find an answer. 
我已经搜索了StackOverflow帖子和各种论坛，但找不到答案。 I have found answers for similar questions, but nothing breaks it down quite enough for me to understand. 我已经找到了类似问题的答案，但没有任何内容足以使我理解。 I understand a good deal of PHP and HTML, but am having difficulty with scripts. 我了解很多PHP和HTML，但是在脚本方面遇到困难。
How can I click on a link, get the href (or what do I need?), have it fade out the current content, find the content I'm trying to load (href or whatever in the link) and load it, then fade it in? 如何单击链接，获取href（或我需要什么？），使其淡出当前内容，找到我要加载的内容（href或链接中的其他内容）并加载， 然后淡入吗？
My previous problems with random bits of code I've tried: 我以前尝试过的随机代码问题：
While going from page to page if another link was clicked while loading, it would only partially fade the second page in.
在页面间翻页时，如果在加载时单击了另一个链接，则只会部分淡入第二页。 Each link had to have it's own script to direct it there.
每个链接必须具有自己的脚本才能将其定向到那里。 Could never figure out how to make it get the href of the link clicked. 永远无法弄清楚如何使其获得点击链接的href。 Examples were so complicated I couldn't modify them to what I needed exactly.
例子太复杂了，我无法将它们修改为我真正需要的东西。 I need to understand the process of it. 我需要了解它的过程。
2 个解决方案
解决方案1
0 已采纳 2013-01-17 21:51:04
Something like: 就像是：
$('.link').on('click', function(){
$('.content').fadeOut().load('/path/to/script', function() {
$(this).fadeIn();
});
});
The key to this to use a HTML page or PHP script which can return the content you want. 使用HTML页面或PHP脚本（可以返回所需内容）的关键。 You might want to retrieve the URL from another element or hard-code it into your script - your call. 您可能想要从另一个元素中检索URL或将其硬编码到脚本中-您的调用。 For more information about how load() works, visit jQuery's documentation . 有关load()工作方式的更多信息， 请访问jQuery的文档 。
解决方案2
0 2013-01-17 21:57:11
I actually developed something just like this some time ago. 实际上，我前段时间开发了类似的东西。
The trick (or a trick) is to wrap your page an an iframe , and on the parent window, have a div element that fades into view when a page is requested, and fades out when the page loads. 技巧（或技巧）是将页面包装为iframe ，并在父窗口上具有div元素，当请求页面时该元素会淡入视图，并在页面加载时逐渐消失。
The parent window looks like this: 父窗口如下所示：
<!DOCTYPE html>
<html>
<head>
<title>< Page1 ></title>
<style>
html, body{
font-family:helvetica;
}
#fade, iframe {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
border-width:0px;
z-index:-1;
opacity:0;
color:#AAA;
background-color:#FFF;
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
-o-transition: opacity 300ms;
}
iframe {
opacity:1;
z-index:1;
background-color:#FFF;
}
</style>
</head>
<body>
<div id="fade">
<h1>Loadin..</h1>
</div>
<iframe src="p1.html"></iframe>
<script>
var fade = document.getElementById("fade");
var iframe = document.getElementsByTagName("iframe")[0];
var t = null;
addEventListener("message", function(e) {
if(t!=null)clearTimeout(t);
fade.style.zIndex = "2";
t=setTimeout(function(){
fade.style.opacity = "1";
},0);
}, true);
iframe.addEventListener("load", function() {
if(t!=null)clearTimeout(t);
t=setTimeout(function(){
fade.style.opacity = "0";
},0);
document.title = iframe.contentWindow.document.title;
t=setTimeout(function(){
fade.style.zIndex = "-1";
},300);
}, true);
</script>
</body>
</html>
And the subpages would each have the following code: 子页面将分别具有以下代码：
<script>
function go() {
window.parent.postMessage("showLoadScreen", "*");
}
</script>
<a href="somepage.html" onclick="go()">somepage.html</a>
This code is a little different in that the fader doesn't pop up unless the requested resource is taking awhile to load. 这段代码稍有不同，除非您请求的资源需要花费一段时间才能加载，否则推子不会弹出。 But, you get the idea. 但是，您明白了。
Since the iframe only exists for visual purposes, it shouldn't cause any major problems. 由于iframe仅出于视觉目的而存在，因此不会引起任何重大问题。 However, note that this code uses HTML5's postMessage API, and you may want to tweak it a bit. 但是，请注意，此代码使用HTML5的postMessage API，您可能需要对其进行一些调整。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.