Question

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

Answer 1

绝对掌握一个javascript框架。 jQuery很受欢迎（因为它是王牌），但有Mootools，Prototype和Dojo等等。

我不确定是否可以在所有浏览器中可靠地完成crosssfading而不会弹出/跳转工件。甚至Dancrumb指出的例子也有些松懈（没有侮辱Dan）。

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

屏幕（最初不可见）
page（one）
容器（最初为空）

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

在旁注上

编辑 - 我会召集我所有的webdev mojo，并试图说服客户在一个旨在传达信息的网站上有完整的页面淡化是多么糟糕的想法。显然我对这个项目知道甜蜜的FA，所以随时打我一巴掌;但我从来没有见过这样一种情况：在页面级别使用时，花哨的效果和过渡改善了网站的可用性。我知道如果我不得不等待一个奇特的过渡到我能够继续导航之前它会让我感到烦恼......

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）来隐藏正文。

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

Answer 4

无法在IE中运行，但是WebKit和FireFox都在使用CSS过渡，并且它们比任何JavaScript都运行得更顺畅。

http://www.w3.org/TR/css3-transitions/

Answer 5

您可以使用AJAX请求加载内容，然后使用javascript淡出一页并淡入另一页？在jQuery中，有些东西：

$.get('newpage.html', {}, function(res){
    $('#content-container').fadeOut().html(res).fadeIn();
});

不完美，但希望这是朝着正确方向迈出的一步？这不是HTML真正的用途......

谢谢，乔

Answer 6

试试这个jQuery插件。这是一个tutorial on page transitions

Answer 7

包含Flash / Video元素或其他复杂内容的网页会发生什么？那些会褪色吗？

Answer 8

这是我想到的一种黑客方式。类似于Alex Lawford的回答，但希望好一点：

单击链接时，发送新页面的AJAX请求，但不对响应执行任何操作。一旦收到响应，然后淡出当前页面，发出标准window.location = <newurl>命令并让javascript立即隐藏然后淡入新文档。

希望这是来自AJAX调用的响应被缓存，因此淡出和淡入之间的时间可以忽略不计。

我只会从第一句重申：这是 hacky 。

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

9 个答案: