如何使HTML页面淡出而另一个淡入？ [英] How do you make an html page fade out while another fades in?

问题描述

我有一个客户，有一个事件规划网站要求他的页面互相淡入。我不知道我该如何做到这一点。有任何想法吗？

I have a client with an event planning site asking his pages to fade into one another. I have no idea how I can accomplish this. Any ideas? Is there anyway to do this without flash?

推荐答案

绝对可以拥有一个javascript框架。 jQuery是受欢迎的（因为它是ace），但有Mootools，Prototype和Dojo等等。

Definitely get hold of a javascript framework. jQuery is popular (because it's ace), but there's Mootools, Prototype, and Dojo to name a few.

我不知道crosssfading是否可以可靠地在所有浏览器没有弹出/跳跃的工件。甚至示例Dancrumb指向是一个有点ropey（没有侮辱意图丹）。

I'm not sure if crosssfading can be done reliably across all the browsers without popping / jumping artifacts. Even the example Dancrumb points to is a bit ropey (no insult intended Dan).

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

Process-wise, you could have 3 layers (top to bottom)

• 屏幕（初始不可见）


• 页面（一个）


• （初始为空）

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

when the user tries to navigate to the second page, load it into the container using ajax. Once the page has loaded, start fading up the screen. Once the screen is at 100% opacity, manipulate the DOM to move the loaded content out of the hidden container and into what is now page two, then start fading the screen back out again.

编辑：我会召唤我所有的webdev mojo，并试图说服客户端我不好的想法是在一个网站设计来传达信息完成页面淡入淡出。显然，我知道这个项目的甜蜜的FA，所以自由地拍我下来;但我从来没有见过一个情况，花哨的效果和过渡改善了网站的可用性，当在页面级别使用。我知道这会刺激我，如果我不得不等待一个花哨的过渡完成，然后我可以继续导航...

EDIT on a sidenote - I would summon up all my webdev mojo and try to convince the client what I bad idea it is to have complete page fades on an site designed to communicate information. Obviously I know sweet FA about this project so feel free to slap me down; but I've never seen a case where fancy effects and transitions has improved the usability of a site when used at the page level. I know it'd irritate me if I had to wait for a fancy transition to finish before I could continue navigating...

这篇关于如何使HTML页面淡出而另一个淡入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！