What am I doing wrong here with this simple JavaScript animation

JavaScript
1 
var foo = null; // object

function doMove() {
  foo.style.opacity = foo.style.opacity+ 0.1;
  setTimeout(doMove,20); // call doMove in 20msec
}

function init() {
  foo = document.getElementById('wrapper'); // get the "foo" object
  foo.style.opacity = 0; // set its initial position to 0px
  doMove(); // start animating
}

init();

I want to change the opacity of the node from 0 to 1… however it is only taking it to 0.1…

I’m sure it is something very obvious

2

The value is stored as a string…

3

okay got it ta:

var foo = null; // object

function doMove() {
  foo.style.opacity = parseFloat(foo.style.opacity) + parseFloat(0.1);
  setTimeout(doMove,1000); // call doMove in 20msec
}

function init() {
  foo = document.getElementById('wrapper'); // get the "foo" object
  foo.style.opacity = 0; // set its initial position to 0px
  doMove(); // start animating
}

init();
4

Now I need to work out how I can use the above method of IE opacity…

5

worked out a method :slight_smile:

	   var foo = null; // object
	   var stepcount = 0;
	   var steps = 100;

	   foo = document.getElementById('wrapper'); // get the "foo" object

	   function setOpacity(obj, value) {
	       obj.style.opacity = value / 10;
	       obj.style.filter = 'alpha(opacity=' + value * 10 + ')';
	   }

	   setOpacity(foo, 10);

	   var timer = setInterval(function () {

	       foo.style.opacity = parseFloat(foo.style.opacity) - parseFloat(0.01);

	       foo.style.filter = "alpha(opacity=" + (steps - stepcount) + ")";

	       //document.getElementById("contact-us").style.filter = "alpha(opacity=30)";
	       stepcount += 1;

	       if (stepcount >= steps) {

	           alert("finished");
	           clearInterval(timer);

	       }

	   }, steps);