Uncategorized

core JavaScript for FadeIn and Fade Out animation effect


Niraj Maharjan
16th Jun 2011

depended functions:

1. setTimeout() : to call the action function continuously

—————————————————————————————————————-

<script type="text/javascript">
<!--
// declaring varables 
var imgObj = null; 
var animate ;
var opcity = 0.4;
var opcityIE  = 40;

// start function 
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 

   //============== for the test object ===================
   tstObj = document.getElementById('imageTest');

   tstObj.style.opacity =0.2;
}
// function for the fade Out
function fadeOut(){
	this.opcity = this.opcity - 0.1 ;
	this.pcityIE =  this.pcityIE - 10;
	//alert(this.opcity);
	//alert(this.opcityIE);
	//alert('here is this');
   	imgObj.style.opacity =opcity;
	imgObj.style.filter = "alpha(opacity="+opcity+")";

   	animate = setTimeout(fadeOut,80); // call moveRight in 20msec
        // stop the animation after some limit

	if(this.opcity < 0.1)
	{
		stop();
	}

}

// fadein function to show the fade out image again
function fadeIn(){
	opcity = this.opcity + 0.1 ;
	this.pcityIE =  this.pcityIE + 10;
	//alert(this.opcity);
	//alert(this.opcityIE);
	//alert('here is this');
   	imgObj.style.opacity =opcity;
	imgObj.style.filter = "alpha(opacity="+opcity+")";

   	animate = setTimeout(fadeIn,90); // call moveRight in 20msec
   if(this.opcity > 1)
	{
		stop();
	}
}

// stop function to stop the animation effect
function stop(){
   clearTimeout(animate);
   imgObj.style.left = '0px'; 
}
window.onload =init;
//-->
</script>

<img id="myImage" src="cutecats.jpg" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Fade Out" onclick="fadeOut();" />
<input type="button" value="Fade In" onclick="fadeIn();" />
<input type="button" value="Stop" onclick="stop();" />

Author Niraj Maharjan (neerooze@gmail.com)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s