图像淡入效果 [英] Image fade-in effect

问题描述

我在网站上为徽标添加了淡入效果：

I added a fade-in effect for the logo on a web site:

#logo img {
    opacity: 0;
    -moz-transition: opacity 5s; /* Firefox 4 */
    -webkit-transition: opacity 5s; /* Safari and Chrome */
    -o-transition: opacity 5s;
    transition: opacity 5s;
}

和

and

<div id="logo"><p><a href="index.html"><img src="img/logo.png" ...  onload="this.style.opacity='1';" /></a></p></div>

第一次看来，它看起来很有效。但是在第二个（第三个......）页面上，只显示了徽标，它没有在IE9或FireFox 19或Opera 12中淡入 - 仅在Safari 5中，每个页面都有淡入效果。



如何在所有页面上使用其他浏览器（不使用JavaScript）？

At first view, it seems to work greatly. But on the second (third, ...) page, the logo is just displayed, it does not fade-in in IE9 or FireFox 19 or Opera 12 - only in Safari 5, the fade-in effect is available for every page.

How can I make it work with the other browsers on all pages (without JavaScript)?

推荐答案

当然，因为你只使用专有的浏览器特定的过渡样式，所以并非所有的浏览器都支持它们（对不起，我不想看兼容性图表;你不能赢得比赛，所以它没有太多意义）。



目前，我能看到的唯一可靠的跨浏览器转换效果方法是使用JavaScript。很多都是在jQuery中很好地实现的。请参阅：

http://ui-dev.jquery.com/docs/Effects /方法 [ ^ ]，

http://ui-dev.jquery.com/docs/Effects [< a href =http://ui-dev.jquery.com/docs/Effectstarget =_ blanktitle =New Window> ^ ]。



如果你想学习jQuery（强烈推荐），请从这里开始：

http： //en.wikipedia.org/wiki/JQuery [ ^ ]，

http://learn.jquery.com/about -jquery / how-jquery-works / [ ^ ]，

http：// learn。 jquery.com/ [ ^ ]。

-SA

Naturally, because you only use proprietary, browser-specific transition styles, so not all browsers support them (sorry, I don''t want to look at compatibility charts; you cannot win the race, so it does not make too much sense).

Presently, the only reliable cross-browser approach to transition effects I can see would be using JavaScript. Many are implemented in jQuery very well. Please see:
http://ui-dev.jquery.com/docs/Effects/Methods[^],
http://ui-dev.jquery.com/docs/Effects[^].

If you want to learn jQuery (highly recommended), please start here:
http://en.wikipedia.org/wiki/JQuery[^],
http://learn.jquery.com/about-jquery/how-jquery-works/[^],
http://learn.jquery.com/[^].

—SA

您编写的代码在所有浏览器中运行正常。问题是页面重定向（加载）的发生速度比JQuery代码快。因此，不提供超链接的相对路径，而是提供绝对路径（根路径）。这样整个页面加载就会出现，你的JQuery代码也能正常运行......



你应该专注于页面加载时间， JQuery代码执行时间。



让我们试试下面..

而不是这种类型的编码

The code you written is working fine in all browser''s. The problem is that the redirection of pages (loading) happening faster than JQuery code. So instead of giving relative paths to your hyperlinks provide absolute path ( root path). So that full page load will occurse and your JQuery code will work fine...

You should concentrate on page load time, JQuery code execution time.

Lets give a try below..
Instead of this type of coding

<a href="Docs/index.html"></a>
<a href="HowTo/index.html"></a>

给出如下路径......

give path like below...

<a href="http://www.cydas.org/Docs/index.html"></a>
<a href="http://www.cydas.org/HowTo/index.html"></a>

..

..

这篇关于图像淡入效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！