Javascript récursivité sur mouseOver ne fonctionne pas?

Question

Le code suivant est supposé faire varier doucement la couleur d'un onglet, que je passe dans la fonction. Cependant, le gradient augmente seulement chaque nouvelle fois que j'entrer dans l'onglet, au lieu d'augmenter une fois que je mets la souris sur ...

<script type = "text/javascript"> 
     hex=255; 
    function fadetext(element){ 

    if(hex>0) { 
     hex-=11; 
     element.style.backgroundColor="rgb("+hex+","+hex+","+hex+")"; 
     setTimeout("fadetext(element)",50); 
    } 
    else 
     hex=255; 
    } 
</script> 


    <div id="tabs"> 
    <ul> 
     <li><a href="tab-frame-css.html" class="selected" target="mainFrame" onMouseOver = "fadetext(this)" onclick="loadit(this)">Personal details</a></li> 
    </ul> 
    </div> 

Answer 1

Pour le délai d'attente, l'élément est non défini lors de l'utilisation sous forme de texte. Vous devez utiliser une fonction Anoymous:

var elem=element;//I find that this is needed in some browsers 
setTimeout(function(){fadetext(elem);},50); 

Answer 2

Pour ce que ça vaut la peine, il vous manque un support de fermeture } à la fin de fadetext.

Answer 3

vous manque l'accolade pour mettre fin à la fonction:

<script type = "text/javascript"> 
     hex=255; 
    function fadetext(element){ 

    if(hex>0) { 
     hex-=11; 
     element.style.backgroundColor="rgb("+hex+","+hex+","+hex+")"; 
     setTimeout("fadetext(element)",50); 
    } 
    else 
     hex=255; 
    } 
} // You're missing this one here 
</script> 

Answer 4

Essayez de remplacer l'appel setTimeout() avec:

setTimeout(function(){fadetext(element);},50); 

Answer 5

Une plus robuste approche, avec lisse animation. Utilisation: fadeText ("elementid", 1000); En outre, vous pouvez réutiliser ce pour tout type d'animation. Changez juste les valeurs entre vous interpolez, et la partie de réglage de style.

function interpolate(start, end, pos) { 
    return start + (pos * (end - start)); 
} 

function fadeText(dom, interval, delay) { 

     interval = interval || 1000; 
     delay = delay || 10; 

    var start = Number(new Date()); 

    if (typeof dom === "string") { 
    dom = document.getElementById(dom); 
    } 

    function step() { 

    var now  = Number(new Date()), 
     elapsed = now - start, 
     pos  = elapsed/interval, 
     value = ~~interpolate(255, 0, pos); 

    dom.style.backgroundColor = 
    "rgb("+value+","+value+","+value+")"; 

    if (elapsed < interval) 
     setTimeout(step, delay); 
    } 

    setTimeout(step, delay); 
}