Image fade-in effect

Question

0.00/5 (No votes)

See more:

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

CSS

#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

HTML

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

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)?

Posted 13-Mar-13 7:09am

Bernhard Hiller

Updated 13-Mar-13 7:12am

v2

Add a Solution

Comments

vinodkumarnie 14-Mar-13 4:39am

Same code worked in Firefox 19.0.2 for all pages... I think the code is correct. May be because of cookies it may not worked. Clear all your browse cookies and try again..

Bernhard Hiller 14-Mar-13 6:33am

That site (http://www.cydas.org) does not set cookies at all.

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-03-13T07:45:00

Solution 1

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

Posted 13-Mar-13 7:45am

Sergey Alexandrovich Kryukov

v2

Comments

Bernhard Hiller 14-Mar-13 3:17am

Thanks for your links to that big library.
I hardly ever do web design, and that's just a nice to have feature I stumbled upon while playing with CSS. I think it is not appropriate to start learning how to use such a big library which I would use less than once a year.
Nonetheless, have my 5 for your answer.

Sergey Alexandrovich Kryukov 14-Mar-13 9:57am

You are welcome.
Will you then accept the answer formally (green button)? Facts do not depend on weather you decide to use something or not :-).

Besides, this is probably the only really cross-browser way. Besides, a fade effect is just one line of code... Your idea of "learning" sound exaggerated to me. I also don't to Web development, but I sometimes make the jQuery demo just for a quick answer to the questions, without "learning" anything...
—SA

vinodkumarnie · Answer 2 · 2013-03-14T01:18:00

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

HTML

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

give path like below...

XML

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

..

Image fade-in effect

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Image fade-in effect

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us