DIV内容淡入/淡出混乱

我已经通过StackOverflow帖子和各种论坛搜索，但无法找到答案。我也找到过类似问题的答案，但没有什么能让我明白。我了解大量的PHP和HTML，但我有困难与脚本。

我怎么能点击一个链接，得到href(或者我需要什么?)，让它淡出当前的内容，找到我想加载的内容(href或链接中的任何东西)并加载它，然后淡出它?

我以前尝试过的随机代码位的问题:

当从一个页面跳转到另一个页面时，如果在加载时点击了另一个链接，它只会部分地淡出第二个页面。
每个链接必须有自己的脚本来引导它到那里。不知道怎么让链接的href被点击
的例子是如此复杂，我不能修改他们，我需要的正是。我需要了解它的过程

类似于

$('.link').on('click', function(){
   $('.content').fadeOut().load('/path/to/script', function() {
      $(this).fadeIn();
   });
});

关键是要使用HTML页面或PHP脚本，它可以返回您想要的内容。您可能希望从另一个元素检索URL，或者将其硬编码到您的脚本(您的调用)中。关于load()如何工作的更多信息，请访问jQuery的文档。

其实我以前也开发过类似的东西。

诀窍(或诀窍)是将您的页面包装为iframe，并在父窗口上有一个div元素，当页面被请求时淡出视图，并在页面加载时淡出。

父窗口如下所示:

<!DOCTYPE html>
<html>
    <head>
        <title>&lt; Page1 &gt;</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>

每个子页面都有以下代码:

<script>
function go() {
    window.parent.postMessage("showLoadScreen", "*");
}
</script>
<a href="somepage.html" onclick="go()">somepage.html</a>

这段代码有点不同，因为除非所请求的资源需要一段时间才能加载，否则页面不会弹出。但是，你明白我的意思了。

由于iframe仅存在于视觉目的，它不应该引起任何重大问题。但是，请注意，这段代码使用了HTML5的postMessage API，您可能需要稍微调整一下。

相关内容

最新更新

热门标签：