#1
  1. web.graphic.print
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Location
    Lancaster, CA USA
    Posts
    118
    Rep Power
    115

    Problem with animation


    I've got a really simple script, it starts a black div (on a white background) at 0 opacity then incrementally fades the div in, however it's not working, I get the error (in Firefox) "Expected end of value but found '0.001'(the amount I was trying to increment the opacity by). Error in parsing value for 'opacity'. Declaration dropped." Anyone have any ideas?
    Fire Minded
    Brent Bevans
    661.974.6771
    43654 Colony dr., Lancaster, CA 93536
    fire.minded.design@gmail.com
    http://www.fireminded.com
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    Opacity can be set to two decimal places. It would also help if you posted the code.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. web.graphic.print
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Location
    Lancaster, CA USA
    Posts
    118
    Rep Power
    115
    Code:
    <!doctype html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<script>
    			window.onload = function() {
    				var debug			= document.getElementById("debug"),
    					count			= 0,
    					test			= function() {
    						debug.style.opacity += .01;
    					},
    					interval;
    				debug.style.opacity = 0;
    				interval			= setInterval(test, 1000 / 60);
    			}
    		</script>
    	</head>
    	<body>
    		<div id="debug" style="background-color: black; color: white">
    			Hello world
    		</div>
    	</body>
    </html>
    Fire Minded
    Brent Bevans
    661.974.6771
    43654 Colony dr., Lancaster, CA 93536
    fire.minded.design@gmail.com
    http://www.fireminded.com
  6. #4
  7. web.graphic.print
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Location
    Lancaster, CA USA
    Posts
    118
    Rep Power
    115

    Booyaka


    Booyaka figured it out! Googled and found that, duh, style attributes are strings so I had to convert the opacity via parseFloat then do the math.

    You can close this thread
    Fire Minded
    Brent Bevans
    661.974.6771
    43654 Colony dr., Lancaster, CA 93536
    fire.minded.design@gmail.com
    http://www.fireminded.com

IMN logo majestic logo threadwatch logo seochat tools logo