Question

我想知道是否有可能在两个HTML文档之间产生f .. 我有几个HTML页面，但让我们用其中两个做一个例子。

index.html, jobs.html

两者都有一个带<a>按钮的菜单。我想做的是：

我点击<a href="jobs.html" id="jobs">Jobs</a>和index.html（我目前正在播放）淡出，jobs.html淡出。有点像div之间的淡出但有一个完整的HTML文档。

非常感谢任何帮助。

Answer 1

使用css隐藏身体。
淡入身体
点击按钮并获取其ID
淡出身体
导航到新网址

<!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/

PS。显然小提琴不起作用，因为你试图导航到一个新的页面，但你仍然可以看到开头的淡入淡出，并在你点击一个按钮时淡出。只需要包含所有页面使用的脚本。

Answer 2

总而言之，如果没有某种预加载和与服务器端组件的交互，这是不可能的

我个人推荐PJAX。 http://pjax.heroku.com/它不仅可以捕获事件并根据事件加载文档，还可以更新浏览器状态，URL，标题，后退按钮等等。

使用它来完成类似行为的示例网站 http://bleacherreport.com/articles/1716958-the-top-10-fantasy-qbs-for-2013 http://reciperehab.com/blog/post/the-6-best-salads-for-spring

*免责声明，我做了第二次......

Answer 3

创建锚标记并设置javascript onclick事件。调用你的fadeOut（）函数（我在下面粘贴）你会希望它在你点击时淡出，当下一页加载时，你会希望它淡入：

jsfiddle：http://jsfiddle.net/HmGap/3/

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：

// 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";
}

Answer 4

是的，有可能，你可以在DIV中附加html（就像你知道的那样），或者你可以使用iframe来管理iframe标签的淡入淡出

在锚点击时淡出并在href中淡入

4 个答案: