Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts

    js animation function half works, cant understand why other half doesnt

    hey there everyone

    iam either being really dumb or something is way wrong with the code. i am trying to create a fade in / fade out effect. i know there are tons of scripts out there that do this, but i like to do it myself. my script is only working in firefox at the mo (when it works il cater for other browsers). basically i can get the fade out part to work, but when i want to fade back in it does nothing. now logically id of thought that fading in would be the same as fade out but reversed.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script type="text/javascript">
    
    var status = 1;
    
    function fade(){
    	
    	var status;
    	var e = document.getElementById("test")
    	animate(e);
    	
    }
    
    function animate(e){
    	if(status == 1){ //fade out
    		if(e.style.opacity == 0.1){
    			status = 0;
    			clearTimeout;
    			return;
    		}
    		else {
    			e.style.opacity = e.style.opacity - 0.1;
    			setTimeout( function(){ animate(e) }, 15 )
    		}
    	}
    	
    	if(status == 0){ //fade in
    			if(e.style.opacity == 1){
    			status = 1;
    			clearTimeout;
    			return;
    		}
    		else {
    			e.style.opacity = e.style.opacity + 0.1;
    			setTimeout( function(){ animate(e) }, 15 )
    		}
    	}
    }
    
    </script>
    
    </head>
    
    <body>
    
    <div id="test" style="width:200px; height:200px; background-color:#F00; opacity:1;" onclick="fade()"></div>
    </body>
    </html>
    fading out works a treat. but getting it to fade back in just wont work. am i missing something really obvious here?
    Last edited by mike182uk; 06-21-2009 at 09:16 AM.

  • #2
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    hahaha yeh looking at it i am being dumb.

    to be honest it shouldnt of worked at if you ask me (the fadeout). but somehow it does.

    anyway heres what ive dun if any1 is interested lol

    Code:
    var status = 1;
    var opacity = 100;
    
    function fade(){
    	
    	var e = document.getElementById("test")
    	e.style.opacity = opacity
    	
    	animate(e);
    	
    }
    
    function animate(e){
    	if(status == 1){
    		if(opacity == 0){
    			status = 0;
    			clearTimeout;
    			return;
    		}
    		else {
    			opacity = opacity - 10;
    
    			setTimeout( function(){ animate(e) }, 15 )
    		}
    	}
    	
    	if(status == 0){
    			if(opacity == 100){
    			status = 1;
    			clearTimeout;
    			return;
    		}
    		else {
    			opacity = opacity + 10;
    			
    			setTimeout( function(){ animate(e) }, 15 )
    			
    		}
    	}
    	
    	e.style.opacity = opacity / 100
    }
    instad of trying to alter the style.opacity which technically is a string, i just create a counter, that is then converted to a suitable opacity value and the style.opacity is set to this value.

  • #3
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    and to make it cross browser

    Code:
    e.style.filter = 'alpha(opacity=' + opacity + ')';


  •  

    Posting Permissions

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