I have a .png image with it's opacity set to about 50%, which I've added a fadeIn jQuery effect to.

Surprisingly it doesn't work properly in IE, as the image fades in to 100% (it somehow seems to adjust the transparency of the image itself), before 'popping' back to its original opacity once the effect has completed.

Does anyone know of a workaround for this??

Instead of the $().fadeIn() method, use $().fadeTo(); to achieve what you need. http://docs.jquery.com/Effects/fadeTo

Thanks for the quick response! Turns out I couldn't use it in the end though since the .png didn't look right with each layer on 100% opacity; but I'm sure itll come in useful at some point

One thing I forgot to mention though is that the code Im using:

$(document).ready (function () {
    $('#coolText').addClass ('hidden');
    $("#coolText:hidden").fadeIn (2000);
 });

Wont work in Chrome for some reason! It just won't fade in, its as if it just stays hidden!

What does the "hidden" class do? Also, what is the :hidden psuedoselector? I've never used one like that before. Or did you mean, "#coolText.hidden"?

Hmmm I was going by the selectors used here?
http://docs.jquery.com/Effects/fadeIn#speedcallback

Ah, I see. I checked out the demos there. :hidden targets a div (or any element) which has a css display of "none". The display property is the only property that is targeted by fadeIn, fadeTo, etc, so if your "hidden" class does anything else....

I don't know why this wouldn't work in Chrome, but if you set display: none in a style attribute instead of a class, this should solve your problem.

***EDIT***
You may have seen this before, but the shortcut for setting display: none, is the hide() method. So instead of:

$('#coolText').addClass ('hidden');

You could just do:

$('#coolText').hide();

Which would be the same as:

$('#coolText').css("display", "none");

Diamond! Thanks a lot, I never knew about the hide() method