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
window.onload = function () {var element = document.getElementsByClassName("div");
                    for (var i=0;i<element.length;i++) {
                        
                        element[i].addEventListener('mouseover',function (){
                        this.style.backgroundColor = "#FFFF11";
                        },false);
                    
                        element[i].addEventListener('mouseout',function (){
                            var level = 1;
                            that=this;
                            var step = function () {
                            var hex = level.toString(16); 
                            that.style.backgroundColor = '#FFFF' + hex + hex;
                            if (level < 15) {
                                level += 1;
                                setTimeout(step, 10);
                              }
                            };         
                            step();      
                        },false);
                    }
                }; 
<body>
       <div  style="position:absolute;top:10px;width:1000px;height:300px;
             border-color: black; border-style:solid; border-width:1px;
             padding:1px;margin:1px;">
        <div class="div" style="position:relative;top:10px;width:100px;height:30px;
             border-color: black; border-style:solid; border-width:1px;
              padding:1px;margin:1px;">    
        </div>
        <div class="div" style="position:relative;top:10px;width:100px;height:30px;
             border-color: black; border-style:solid; border-width:1px;
              padding:1px;margin:1px">    
        </div>
        <div class="div" style="position:relative;top:10px;width:100px;height:30px;
             border-color: black; border-style:solid; border-width:1px;
              padding:1px;margin:1px">    
        </div>
          <div class="div" style="position:relative;top:10px;width:100px;height:30px;
             border-color: black; border-style:solid; border-width:1px;
              padding:1px;margin:1px">    
        </div>
            <div class="div" style="position:relative;top:10px;width:100px;height:30px;
             border-color: black; border-style:solid; border-width:1px;
              padding:1px;margin:1px">    
        </div>
        </div>
    </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).
window.onload = function () {
    var element = document.getElementsByClassName("div"),
        i;
    
    function mouseout() {
        var level = 1,
            that = this;
            
        function step() {
            var hex = level.toString(16);
            that.style.backgroundColor = '#FFFF' + hex + hex;
            if (level < 15) {
                level += 1;
                setTimeout(step, 10);
            }
        }
        step();
    }
    
    function mouseover() {
        this.style.backgroundColor = "#FFFF11";
    }
    
    for (i = 0; i < element.length; i++) {
        element[i].addEventListener('mouseover', mouseover, false);
        element[i].addEventListener('mouseout', mouseout, false);
    }
};
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!