jquery: Why do opacity animations only work with FF?

Question

I'm wondering why opacity animations only work with Firefox, and not with chrome or internet explorer.

For example,

jQuery("#a").fadeTo(1000,1);

fades the element in with firefox, but just makes it appear with Chrome or IE. All I want is for the element to fade in.

How can I get this to work with IE and chrome?

Edit: Same thing if I use fadeIn() or any other similar function, like show()

---

Edit: I ended up fixing the issue. I will post back later with details; it had to do with nested elements. Just wanted to post this edit so no one wastes their time trying to answser :)

Thanks to all that answered!

---

Edit: Turns out the problem was that #a (which is an <a href.../>) has a div within it - inside the div is the image and text I wanted to fade. Instead of fading #a, I did:

$("#a").find("div").fadeTo...

(which worked perfectly).

Anyways thanks again for the answers; I've selected the one that was most helpful as accepted.

Answer 1

Check this quick demo of .fadeIn and .fadeTo, and verify it in your browsers: http://www.jsfiddle.net/w3bt8/1/

What kind of element are you fading? Also, are you using $(document).ready() correctly?

Answer 2

The fading functions of jQuery should work in all current browsers. In IE, they look ugly because of crappy anti-aliasing but they work.

Answer 3

There should be something wrong in your code. The fadeIn and fadeOut work in all browsers. JQuery team has really worked hart to do all that stuff :)