我有一个客户，他的活动策划网站要求他的页面相互淡入淡出。我不知道我怎么能做到这一点。有任何想法吗？有没有办法在没有 Flash 的情况下做到这一点？
【问题讨论】：
一定要掌握一个 javascript 框架。 jQuery 很流行（因为它是王牌），但还有 Mootools、Prototype 和 Dojo 等等。
我不确定是否可以在所有浏览器上可靠地完成交叉淡化，而不会弹出/跳转工件。即使是 Dancrumb 所指的例子也有点啰嗦（没有侮辱 Dan 的意思）。
就流程而言，您可以有 3 层（从上到下）
当用户尝试导航到第二个页面时，使用 ajax 将其加载到容器中。页面加载后，开始淡化屏幕。屏幕达到 100% 不透明度后，操纵 DOM 将加载的内容移出隐藏容器并进入现在的第二页，然后再次开始淡出屏幕。
EDIT 在旁注中 - 我会调出我所有的 webdev mojo 并尝试让客户相信我的坏主意是在一个旨在传达信息的网站上拥有完整的页面淡入淡出。显然我知道这个项目的甜蜜FA，所以请随意打我；但我从未见过这样的案例，即在页面级别使用时，花哨的效果和过渡可以提高网站的可用性。我知道如果我必须等待花哨的过渡完成才能继续导航，这会让我很恼火......
【讨论】：
IE 原生支持页面转换，使用 META 标签。
请参阅Microsoft page about Filters and Transitions 了解更多信息
对于与浏览器无关的方法（使用 Javascript），请参阅 this Stack Overflow question
【讨论】：
这应该可以工作，而不依赖于 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）来隐藏正文。
最后，为什么？我想如果我访问你的网站，这些影响很快就会让我非常恼火。为什么不直接将用户带到他们要求的页面？
【讨论】：
在 IE 中无法运行，但 WebKit 和 FireFox 都在使用 CSS 转换，而且它们运行起来比任何 JavaScript 都流畅得多。
【讨论】：
这可能有点晚了，但是在加载时淡入页面，然后在单击时淡出我建议使用 jQuery。我写了这个快速的小脚本，它将完成你所追求的技巧。看看吧，我会在下面解释。
CSS
body { display:none; }
JS
$(document).ready(function()
{
$( 'body' ).fadeIn("slow", 0.0);
$( 'body' ).fadeIn("slow", 0.1);
$( 'body' ).fadeIn("slow", 0.2);
$( 'body' ).fadeIn("slow", 0.3);
$( 'body' ).fadeIn("slow", 0.4);
$( 'body' ).fadeIn("slow", 0.5);
$( 'body' ).fadeIn("slow", 0.6);
$( 'body' ).fadeIn("slow", 0.7);
$( 'body' ).fadeIn("slow", 0.8);
$( 'body' ).fadeIn("slow", 0.9);
$( 'body' ).fadeIn("slow", 1.0);
$('a').click(function(){
$('body').fadeOut();
setTimeout("nav('"+this.href+"')",1000);
return false;
});
});
function nav(href){
location.href=href;
};
CSS 阻止了 body 的显示，这允许 JS 在页面加载时启动淡入淡出效果。主体的淡入淡出设置为间隔设置，以允许更平滑的淡入淡出效果，给网站加载时间。我已将淡出效果设置为在单击任何锚链接时触发（您可以将其更改为您希望充当淡出触发器的任何内容）。当页面淡出时，它很可能会淡出为“白色”屏幕。为避免这种情况，请将您的 HTML 背景颜色设置为任何 HEX 以匹配网站颜色。
该脚本可能是最好的解决方案，并且可以最快地在任何网站上实施。它已经在 IE7-8、FF 3+ 和 Opera 9-10 上进行了测试，效果非常好。享受吧！
【讨论】：
noscript 部分。
$('body').css('display', 'none');
您可以使用 AJAX 请求加载内容，然后使用 javascript 淡出一个页面并淡入另一个页面？在 jQuery 中，类似于：
$.get('newpage.html', {}, function(res){
$('#content-container').fadeOut().html(res).fadeIn();
});
并不完美，但希望这是朝着正确方向迈出的一步？这并不是 HTML 的真正用途......
谢谢， 乔
【讨论】：
试试这个 jQuery 插件。这是tutorial on page transitions
【讨论】：
包含 Flash/视频元素或其他复杂内容的页面会发生什么情况？那些会正常褪色吗？
【讨论】：
这是我刚刚想到的一种 hacky 方式。类似于 Alex Lawford 的回答，但希望更好一点：
点击链接时，发送一个新页面的 AJAX 请求，但不要对响应做任何事情。收到响应后，淡出当前页面，发出标准的window.location = <newurl> 命令并让该侧的javascript 立即隐藏，然后淡入新文档。
这里希望来自 AJAX 调用的响应被缓存，因此淡出和淡入之间的时间可以忽略不计。
我只是重申第一句话：这是hacky。
【讨论】：