css opacity

Topic

New Reply

Possibly crying for the moon here, but I’d like to be able to use Javascript and css to gradually fade an image. IE and Mozilla handle opacity differently:

style=”opacity:0.4;filter:alpha(opacity=40)”

The ‘filter’ option is IE. Using a timer and a for loop, I’d like to substitute the two values with variables and gradually fade them. Here’s a code snippet that fails miserably in IE (without the timer and for loop):

function fadeaway()
{
var element = document.getElementById(‘howdense’);
var density = 50;
element.style.filter=alpha(opacity=density);

}

Any ideas, please?

Reply | Quote

Replies

Shucks. Having to answer my own question! Got the syntax wrong – the last line should read:

element.filters.alpha.opacity=density;

Or depending on context you can use ‘this’ instead of element.

Hope this helps some other coder out there…

Reply | Quote

Thanks for sharing, it’s amazing how often a search turns up an old thread with just the solution someone is looking for!

Reply | Quote

When it comes to cross browser css compatibility I have always found using jQuey or some other javascript framework to be ideal.

With jQuery it would just be a matter of

$(“#yourElementID”).FadeIn(1000);
$(“#yourElementID”).FadeOut(1000);
etc…

http://docs.jquery.com/Effects

Or if you don’t want to fade completely out…

$(“#yourElementID”).animate({opacity:.5},1000);

– Dom

Reply | Quote