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

Question

我有一个活动策划网站的客户要求他的网页互相淡入淡出.我不知道如何才能做到这一点.有任何想法吗？反正没有闪光灯吗？

Answer 1

绝对掌握一个javascript框架.jQuery很受欢迎(因为它是王牌),但有Mootools,Prototype和Dojo等等.

我不确定是否可以在所有浏览器中可靠地完成crosssfading而不会弹出/跳转工件.即使是Dancrumb指出的例子也是有点绳索(没有侮辱Dan).

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

• 屏幕(最初看不见)
• 第一页
• 容器(最初是空的)

当用户尝试导航到第二页时,使用ajax将其加载到容器中.页面加载后,开始淡出屏幕.一旦屏幕处于100%不透明度,操纵DOM以将加载的内容移出隐藏容器并进入现在的第二页,然后再次开始淡出屏幕.

在旁注编辑 - 我会召集我所有的webdev mojo,并试图说服客户在我们想要在一个旨在传达信息的网站上完成页面淡化的坏主意.显然我对这个项目知道甜蜜的FA,所以随时打我一巴掌; 但我从来没有见过这样一种情况:在页面级别使用时,花哨的效果和过渡改善了网站的可用性.我知道如果我不得不等待一个奇特的过渡完成才能继续导航,这会让我感到恼火......

Answer 2

使用META标记,IE本身支持页面转换.请参阅有关滤镜和转微软网页更多

对于浏览器不可知的方法(使用Javascript),请参阅此Stack Overflow问题

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)来隐藏正文.

最后,为什么呢？我想如果我访问你的网站,这些影响会很快开始严重惹恼我.为什么不将用户带到他们要求的页面？