Question

So I’ve made custom function for a game I’m working on, one being fade in the other one fade out. The problem is fadeOut works, but fading back IN does not… strange. Any clues? See code below.

THIS WORKS:

fadeOut:function(o,duration)
{
    o.style.opacity = 1;
    o._anim = function()
    {
         if(o.style.opacity <=0)
         {
             clearInterval(o._animInt);
             return false;
         }
         o.style.opacity -= .1;
         game.log("opacity:" + o.style.opacity);
    }
    o._animInt = setInterval(o._anim,duration / 10)
}

THIS DOES NOT:

fadeIn:function(o,duration)
{
    o.style.opacity = 0;
    o._anim = function()
    {
        if(o.style.opacity >= 1)
        {
            clearInterval(o._animInt);
            return false;
        }
        o.style.opacity += .1;
        game.log("opacity:" + o.style.opacity);
    }
    o._animInt = setInterval(o._anim,duration / 10)
}

Answer 1

function fadeIn (o,duration) {
   o.style.opacity = 0;

   o._anim = function() {
      var opacity = parseFloat(o.style.opacity);
      if(opacity >= 1) { clearInterval(o._animInt); return false;}
      o.style.opacity = opacity + 0.1;
      game.log("opacity:" + o.style.opacity);
   }

   o._animInt = setInterval(o._anim,duration / 10)
}

The opacity attribute is a string. Parse it first, compare, increment, then store. This worked for me in Chrome and Firefox.