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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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