Hello, I want to use javascript to fade in a layer after the user click a button. please help me I want to that animation to work in Internet Explorer and Firefox, I searched on google and found. obj.filters.alpha.opacity, but it doesn't seem to work.

Please Help Me.

Recommended Answers

All 3 Replies

Member Avatar for langsor

The quick answer is that IE supports filter: Alpha(Opacity=80); and most DOM browsers support opacity: 0.8; -- and remember, all children of the alpha element will inherit the alpha state as well.

Then using a window.setInterval() method to create the animated effect.

Of course, using IE's proprietary method will create errors in FF and probably others, but that only matters if you want error-free code. :-)

Also, check out this site if you want cool weighted animation effects to your animation ...

I've attached a zip file with a little image gallery that uses some of these effects (not the fade in/out, but zoom in/out and scroll left/right) as further example -- I made this for another thread and a fun project, but I can't find that thread on DaniWeb right now.

Let me know if I can help out more on this one.


Member Avatar for langsor

The long answer is something like this...


<style type="text/css">
body {
  padding: 60px;
  background: silver;

#fade {
  width: 80px;
  padding: 100px;
  color: white;
  font-weight: bold;
  font-family: Arial;
  white-space: nowrap;
  background: black;
  border: 1px solid indigo;
<!--[if IE ]>
<script type="text/javascript">
var IE = true;
<script type="text/javascript">

window.onload = function () {
  var fade = document.getElementById('fade');
  var fader = document.getElementById('fader');
  if ( typeof IE == 'boolean' ) {
    fade.style.filter = 'Alpha(Opacity=100)';
  } else {
    fade.style.opacity = 1;
  var step = 10;
  fader.onclick = function () {
    var visible = this.name;
    this.name = ( visible == 'true' ) ? 'false' : 'true';
    var engine = window.setInterval( function () {
    step = ( visible == 'true' ) ? step - 1 : step + 1;
    if ( step < 0 || step > 10 ) {
      window.clearInterval( engine );
    if ( typeof IE == 'boolean' ) {
      fade.style.filter = 'Alpha(Opacity=' + step * 10 + ')';
    } else {
      fade.style.opacity = ( step / 10 );
    }, 100 );
<div id="fade">FADE ME</div>
<input type="button" id="fader" name="true" value="Toggle Fade" />

No errors and works in latest versions of IE, FF, and Opera but it has no fault-tolerance since if you click the button in the middle of a fade in/out it freaks out and doesn't allow you to fade it again ... would need to account for that.



Thanks a lot langsor, the solution i figured out is that hide the button while the layer is animating.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.