Jump to content

Javascript Fade Effect


sunwukung
 Share

Recommended Posts

Hi all, I wonder if anyone can help me with this script:As it stands, the image fades out on mouseover, and reappears on mouseout (with a delay to prevent flickering). However, the effect only appears to work if you allow the opacity to fully decrement/increment to a maximum value. If the user (me...) makes rapid mouse movements, the function comes to a halt and stops fading. I figure either I need to add an event listener, or somehow I need to drop override/cancel the previous event.JS

//Fade Test ScriptaddLoadEvent(event);// EVENT HANDLER//-------------------------------------------------------------------------//stacks up events so they don't conflict//http://www.akxl.net/labs/articles/handling-events-in-javascript---from-basics-to-best-practices/function AddEventHandler(e, x){return function(){if(e) e(); x();};}// FADE FUNCTION//-------------------------------------------------------------------------function fade(element,targetOpacity) {						  //define limits for opacity						  var opaq = parseInt(element.style.opacity)*100;						  element.fade =  window.setInterval(function(){								  //sample the current value								  //multiply the value by 100 to enable de-incrementation								  //check for equality and exit the function								  if (opaq == targetOpacity){									  clearInterval(element.fade); element.fade=false;}								  //check for disparity								  else if (opaq > targetOpacity){									  opaq--;									  newopaq = (opaq/100);									  element.style.opacity = "" + newopaq + "";									  }								  else if (opaq < targetOpacity){									  opaq++;									  newopaq = (opaq/100);									  element.style.opacity = "" + newopaq + "";									  }								  },2);//end of interval						  }// EVENT TRIGGER//-------------------------------------------------------------------------function event(){				//TARGET ELEMENT				var box = document.getElementById("box");				box.style.opacity = "1";				//EVENT HANDLING				function eventHide(){					fade(box,0);					};				function eventShow(){					fade(box,100);					};				//EVENT DELAY				//declare timing variable				var mouseEventTimer;				function delayOver(){					clearTimeout(mouseEventTimer);					mouseEventTimer = setTimeout(function(){eventHide(); }, 100);					};				function delayOut(){					clearTimeout(mouseEventTimer);					mouseEventTimer = setTimeout(function(){eventShow(); }, 100);					};				box.onmouseover = AddEventHandler(box.onmouseover, delayOver);				box.onmouseout = AddEventHandler(box.onmouseout, delayOut);}

AddLoadEvent (from Jeremy Keith:DOM scripting)

function addLoadEvent(func)	{var oldonload=window.onload;	  if (typeof window.onload != "function")		{		  window.onload=(func);		}	  else		{		  window.onload = function()			{			  oldonload();			  func();			}		}	}

HTML

<!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" xml:lang="en" lang="en">  <head>  <!--  ...............................AUTHOR......................................  ............................Marcus Kielly..................................  .................................2009......................................  ..........................marcus@marcusk.co.uk.............................  -->  <title>Fade Test</title>	  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	  <meta name="description" content="description" />	  <meta name="keywords" content="content" />	  <link rel="icon" type="image/gif" href="./graphics/icon.gif" />	  <link rel="stylesheet" media="screen" type="text/css" href="./screen.css" />	<script type="text/javascript" src="./addLoadEvent.js"></script>	<script type="text/javascript" src="./fade.js"></script>  </head>	  <body>  <div id="wrapper">	<!--.........................HEADER......................-->	  <div id = "masthead">			<h1>Fade Test</h1>	  </div>	  <!--.........................CONTENT......................-->	  <div id= "content">			<div id = "box">				<img src='./images/image.jpg' alt='holly'/>			</div>	  </div>  </div>  <!--.........................FOOTER......................-->  <div class="push">		</div>		</div>		<div id="footer">			  <div class="sub-footer">			  <p>footer content</p>			  </div>		</div>	</body>  </html>

CSS

#box	{	  width:235px;	  height:235px;	}

Any ideas? I know this would be easier with jQuery - but I want to try and learn the principles of JS before I resort to a library. Also, I know the style element only works in FF, but (for the purposes of this question) I'm more interested in the basic principle than cross browser performance.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...