Palme: ein-ausblenden von Text, will nicht so richtig

Hallo,

ich habe mir eine Funktion zusammengebastelt, die bei überfahren eines Links an anderer Stelle einen Text allmählich ausblendet, und dann einen anderen wieder einblendet.
Klappt auch eigentlich ganz gut, außer wenn man einen Link etwas schneller überfährt, und wieder verläßt, dann flackert der Text.

Ok, das liegt am überschneiden der Funktionsaufrufe, das ist mir klar. Aber wie kann ich nun JavaScript mitteilen, dass es warten soll, neuen Text einzublenden, bis dass der andere Text vollständig ausgeblendet ist. Bzw. dass es warten soll, Text auszublenden, bis dass der andere Text vollstänig eingeblendet ist?

Da meine Seite noch nicht online ist, hier einmal der Quelltext zum evtl. probieren/nachzuvollziehen (etwas durcheinander dargestellt, da reinkopiert):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>unbekannt</title>

<script type="text/JavaScript">
<!--
function ausblenden(text) {
  window.setTimeout("document.getElementById('infotext').style.color = '#353535'",150);
  window.setTimeout("document.getElementById('infotext').style.color = '#6A6A6A'",250);
  window.setTimeout("document.getElementById('infotext').style.color = '#9F9F9F'",350);
  window.setTimeout("document.getElementById('infotext').style.color = '#D4D4D4'",450);
  window.setTimeout("document.getElementById('infotext').style.color = '#FFFFFF'",550);

if(text == 'eins'){
   window.setTimeout("document.getElementById('infotext').firstChild.nodeValue = 'Info zu Menue 1'",550);
   }
  if(text == 'zwei'){
   window.setTimeout("document.getElementById('infotext').firstChild.nodeValue = 'Info zu Menue 2'",550);
   }
  if(text == 'original'){
   window.setTimeout("document.getElementById('infotext').firstChild.nodeValue = 'Original Text'",550);
   }

window.setTimeout("einblenden();",600);
  }

function einblenden() {
  window.setTimeout("document.getElementById('infotext').style.color = '#D4D4D4'",150);
  window.setTimeout("document.getElementById('infotext').style.color = '#9F9F9F'",250);
  window.setTimeout("document.getElementById('infotext').style.color = '#6A6A6A'",350);
  window.setTimeout("document.getElementById('infotext').style.color = '#353535'",450);
  window.setTimeout("document.getElementById('infotext').style.color = '#000000'",550);
  }
//-->
</script>
</head>
<body style="margin:0px; padding:0px;">

<a href="index.html" onfocus="this.blur()" onmouseover="ausblenden('eins')" onmouseout="ausblenden('original')">
 <span>
 Menü 1
 </span>
</a>
<br>
<a href="index.html" onfocus="this.blur()" onmouseover="ausblenden('zwei')" onmouseout="ausblenden('original')">
 <span>
 Menü 2
 </span>
</a>

<span style="position:absolute; top:100px; left:100px;" id="infotext">
 Original Text
</span>

</body>
</html>

Wenn man nun z.B. etwas schneller mit der Maus auf Menü1 fährt, dieses wieder verläßt, und dann nochmal drauf fährt, dann flackert der Text. Wie bekomme ich dies am Besten ausgestellt?

  1. Hallo

    ich habe mir eine Funktion zusammengebastelt, die bei überfahren eines Links an anderer Stelle einen Text allmählich ausblendet, und dann einen anderen wieder einblendet.
    Klappt auch eigentlich ganz gut, außer wenn man einen Link etwas schneller überfährt, und wieder verläßt, dann flackert der Text.

    Ok, das liegt am überschneiden der Funktionsaufrufe, das ist mir klar. Aber wie kann ich nun JavaScript mitteilen, dass es warten soll, neuen Text einzublenden, bis dass der andere Text vollständig ausgeblendet ist. Bzw. dass es warten soll, Text auszublenden, bis dass der andere Text vollstänig eingeblendet ist?

    Definiere eine Variabel z. B. 10, die du nach dem ausführen von mouseover geändert wird.
    Frage bei einer anderem evect zuerst ab, ob die Variabel 10 ist. Ist sie das soll die funktion nicht ausgeführt werden.

    Gruss Michy