如何让一个html页面淡出而另一个页面淡入？

Question

我有一个客户，他有一个活动策划网站，要求他的页面彼此淡入。我不知道如何才能做到这一点。有什么想法吗？有没有办法在没有flash的情况下做到这一点？

Answer 1

绝对可以得到一个javascript框架。jQuery很流行(因为它是王牌)，但也有Mootools、Prototype和Dojo等。

我不确定是否可以在所有浏览器中可靠地完成交叉淡入淡出，而不会出现弹出/跳转伪像。甚至Dancrumb所指的例子也有点麻烦(没有冒犯的意思，丹)。

在流程方面，你可以有3层(从上到下)

初始为空的屏幕(initially invisible)

• page (one)

• container (initially )
• )

当用户尝试导航到第二个页面时，使用ajax将其加载到容器中。一旦页面加载完毕，就开始淡出屏幕。一旦屏幕达到100%不透明度，操作DOM将加载的内容移出隐藏容器，进入现在的第二页，然后再次开始淡出屏幕。

在边注上编辑-我会召集我所有的webdev mojo，并试图说服客户我的坏主意是在一个旨在交流信息的网站上有完整的页面淡出。显然，我对这个项目很了解，所以请随时给我耳光；但我从来没有见过在页面级别使用时，奇特的效果和过渡可以提高网站的可用性的情况。我知道，如果我必须等待一个奇特的转换完成，才能继续导航，这会激怒我……

Answer 2

使用META标签，IE本身就支持页面过渡。有关更多信息，请参阅Microsoft page about Filters and Transitions

有关与浏览器无关的方法(使用Javascript)，请参见this Stack Overflow question

Answer 3

在不依赖Ajax (jQuery)的情况下，这应该是可行的：

$(function(){

    /*
    Add this code to every page.

    We start by hiding the body, and then fading it in.
    */
    $('body').hide().fadeIn('fast');

    /*
    Now we deal with all 'a' tags...
    */
    $('a').click(function(){
        /*
        Get the url from this anchors href
        */
        var link = $(this).attr('href');
        /*
        Fade out the whole page
        */
        $('body').fadeOut('fast', function(){
            /*
            When that's done (on the 'callback') send the browser to the link.
            */
            window.location.href = link;
        });
        return false;
    });

});

然而，值得注意的是，如果你在页面的底部加载js (我们经常被告知这样做)，在缓慢的页面加载中，页面可能是可见的，然后是不可见的，然后又会淡入……这看起来会很奇怪。

一种解决方案是将正文隐藏在CSS中，但您可能会关闭JS但打开CSS的访问者，然后他们将只有一个空白页面。或者，您可以在页面顶部使用少量的js (不依赖于jQuery)来隐藏正文。

然而，最后，为什么？我想，如果我访问你的网站，这些影响很快就会开始让我非常恼火。为什么不直接把用户带到他们要求的页面呢？