SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Divisive Cotton's Avatar
    Join Date
    Jun 2008
    Location
    Andy lives in London, UK
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What am I doing wrong here with this simple JavaScript animation

    Code:
    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
    Let everyday be Christmas

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The value is stored as a string...
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Addict Divisive Cotton's Avatar
    Join Date
    Jun 2008
    Location
    Andy lives in London, UK
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay got it ta:

    Code:
    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();
    Let everyday be Christmas

  4. #4
    SitePoint Addict Divisive Cotton's Avatar
    Join Date
    Jun 2008
    Location
    Andy lives in London, UK
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now I need to work out how I can use the above method of IE opacity...
    Let everyday be Christmas

  5. #5
    SitePoint Addict Divisive Cotton's Avatar
    Join Date
    Jun 2008
    Location
    Andy lives in London, UK
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    worked out a method

    Code:
    	   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);
    Let everyday be Christmas


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •