ugrás a tartalomhoz

Események és setTimeout

reagenross · 2011. Jún. 20. (H), 20.23
Sziasztok,

egy olyan menüt csinálok JavaScriptben, amelynél ha a menüpontok fölé viszem a kurzort, a menüpont felvesz egy színt, majd onmouseoutra elhalványodik. A halványodást setTimeout-al csinálom. Az a problémám, hogy ha túl gyorsan mozgatom a kurzort, és a fadelés lefutása előtt kiváltok egy másik eseményt, akkor az a fadelést megszakítja.
Kódot azért nem írok, mert csak a probléma elméleti megoldása érdekelne, amit kidolgozhatok magamtól.
‹ textare <br> jQTouch villogó oldal betöltődés ›
 ■
1

Hogy szakítja meg?

Poetro · 2011. Jún. 20. (H), 21.03
Hogyan szakítja meg a fadelést? Hogyan használod a setTimout-ot? Egy setTimeout kicsit kevés animációhoz.
2

window.onload = function ()

reagenross · 2011. Jún. 20. (H), 21.26
  1. window.onload = function () {var element = document.getElementsByClassName("div");  
  2.                     for (var i=0;i<element.length;i++) {  
  3.                           
  4.                         element[i].addEventListener('mouseover',function (){  
  5.                         this.style.backgroundColor = "#FFFF11";  
  6.                         },false);  
  7.                       
  8.                         element[i].addEventListener('mouseout',function (){  
  9.                             var level = 1;  
  10.                             that=this;  
  11.                             var step = function () {  
  12.                             var hex = level.toString(16);   
  13.                             that.style.backgroundColor = '#FFFF' + hex + hex;  
  14.                             if (level < 15) {  
  15.                                 level += 1;  
  16.                                 setTimeout(step, 10);  
  17.                               }  
  18.                             };           
  19.                             step();        
  20.                         },false);  
  21.                     }  
  22.                 };   
  1. <body>  
  2.        <div  style="position:absolute;top:10px;width:1000px;height:300px;  
  3.              border-color: black; border-style:solid; border-width:1px;  
  4.              padding:1px;margin:1px;">  
  5.         <div class="div" style="position:relative;top:10px;width:100px;height:30px;  
  6.              border-color: black; border-style:solid; border-width:1px;  
  7.               padding:1px;margin:1px;">      
  8.         </div>  
  9.         <div class="div" style="position:relative;top:10px;width:100px;height:30px;  
  10.              border-color: black; border-style:solid; border-width:1px;  
  11.               padding:1px;margin:1px">      
  12.         </div>  
  13.         <div class="div" style="position:relative;top:10px;width:100px;height:30px;  
  14.              border-color: black; border-style:solid; border-width:1px;  
  15.               padding:1px;margin:1px">      
  16.         </div>  
  17.           <div class="div" style="position:relative;top:10px;width:100px;height:30px;  
  18.              border-color: black; border-style:solid; border-width:1px;  
  19.               padding:1px;margin:1px">      
  20.         </div>  
  21.             <div class="div" style="position:relative;top:10px;width:100px;height:30px;  
  22.              border-color: black; border-style:solid; border-width:1px;  
  23.               padding:1px;margin:1px">      
  24.         </div>  
  25.         </div>  
  26.     </body>  
A fadeléshez az ötletet a The Good Partsból vettem. A div osztályú divek reprezentálják az egyes menüpontokat, onmouseoverre megkapják az alap színt. Amikor a következő "menüpontra" ugrok, akkor az előző elhalványodik, de ha elég gyorsan viszem a kurzort 2 menüponttal lejjebb, akkor a legelső menüpont már csak részlegesen halványodik el.
3

that

Poetro · 2011. Jún. 20. (H), 22.40
Ha olvastad a The Good Parts című könyvet, akkor tudhatod, hogy:
  • nem hozunk létre függvényeket ciklusokban,
  • kerüljük a globális változókat (var használata kötelező),
  • a kód elején deklarálunk minden használni kívánt változót.

Ebben a pár soros példában sikerült mindhármat elkövetni. A that ugyanis nálad globális változó például (hiányzik előle a var).
  1. window.onload = function () {  
  2.     var element = document.getElementsByClassName("div"),  
  3.         i;  
  4.       
  5.     function mouseout() {  
  6.         var level = 1,  
  7.             that = this;  
  8.               
  9.         function step() {  
  10.             var hex = level.toString(16);  
  11.             that.style.backgroundColor = '#FFFF' + hex + hex;  
  12.             if (level < 15) {  
  13.                 level += 1;  
  14.                 setTimeout(step, 10);  
  15.             }  
  16.         }  
  17.         step();  
  18.     }  
  19.       
  20.     function mouseover() {  
  21.         this.style.backgroundColor = "#FFFF11";  
  22.     }  
  23.       
  24.     for (i = 0; i < element.length; i++) {  
  25.         element[i].addEventListener('mouseover', mouseover, false);  
  26.         element[i].addEventListener('mouseout', mouseout, false);  
  27.     }  
  28. };  
4

Köszönöm a javítást!

reagenross · 2011. Jún. 20. (H), 23.35
Köszönöm a javítást!