• Entries (RSS)
  • Comments (RSS)
Sep

25

JavaScript fading effect

Posted by Albin Joseph | Posted in JavaScript | Posted on 25-09-2008

Tagged Under : , ,

JavaScript fading effect.

Have you come across a situation where you need to fade out some text message? Recently in one of my project I wanted to fade out the error message after few seconds.

This fading effect can be easily achieved with little JavaScript. The complete JavaScript code for fading effect is given below.

?View Code JAVASCRIPT
<html>
	<head>
		<script language="JavaScript">
			var value = 0;
 
			function fadeout(){ 
				if(value < 255) { 
					value += 10; 
					document.getElementById("msgblock").style.color="rgb(255,"+value+","+value+")";
					ID = setTimeout("fadeout()",20); 
				}
				else {
					clearTimeout(ID);
				}
 
			}
			function fade(){
				setTimeout("fadeout()",5000); 
			}
 
 
		</script>
	</head>
	<body>
		<div id="msgblock" style="color:red;">Javascript fading effect</div> 
		<br />
		<input type="button" value="Fade Effect" onclick="javascript:fade() " />
	</body>
</html>

The above code starts the fading effect after 5 seconds. The error message block was initially red in color. The trick used here is to change the color value in regular intervals using JavaScript. Once the color is white we can clear the timeout and our code will not execute again.

Share
(3) Comments
Read More