sunwukung Posted February 6, 2009 Share Posted February 6, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.