Javascript gleitende Menü bleiben offen. clear nicht wie erwartet funktioniert -kann Sie mir helfenclearTimeout funktioniert nicht wie erwartet

bitte

<html> 
<head> 
<style> 
#Menu1 {position:absolute; 
top:-190px; left:150px; 
font-size:15px;visibility:visible; 
background-color:#D0BCFE; 
width:114px;z-index:0;border-style:solid; 
} 
#Menu2 {position:absolute; 
top:-190px; left:580px; 
font-size:15px;visibility:visible; 
background-color:#D0BCFE; 
width:114px;z-index:0;border-style:solid; 
} 
#Menu3 {position:absolute; 
top:-190px; left:1005px; 
font-size:15px;visibility:visible; 
background-color:#D0BCFE; 
width:114px;z-index:0;border-style:solid; 
} 

TD.TDHREFMENUS{font-size:20;color:red;position:relative;z-index:0;background-color:#C4ABFE;border-style:solid;width:114px;} 
</style> 
<script> 

var stopUp=null; 
var stopDown=null; 
var mov=-143; 
var on; 

function down(id){ 

    if (!on){ 
     on=true; 
     clearTimeout(stopUp) 
     stopUp=null; 
    } 

    var obj=document.getElementById(id) 
    obj.style.top=mov +"px"; 
    if (mov <=27){ 
     mov+=2; 
     stopDown=setTimeout(function(){ down(id) }, 20) 
    } 
} 

function up(id){ 

    if (on){ 
     on=false; 
     clearTimeout(stopDown) 
     stopDown=null; 
    } 

    var obj=document.getElementById(id) 
    obj.style.top=mov +"px"; 
    if (mov >=-143){ 
     mov-=2; 
     stopUp=setTimeout(function(){ up(id)}, 20); 
    } 

} 


</script> 

</head> 

<body leftmargin=0 marginwidth=0 topmargin=0 marginheight=0> 


<div id="Menu1" onmouseover="down('Menu1')" onmouseout="up('Menu1')"> 
URL 1<br> 
URL 2<br> 
URL 3<br> 
URL 4<br> 
URL 5<br> 
URL 6<br> 
URL 7<br> 
URL 8<br> 
</div> 
</div> 

<div id="Menu2" onmouseover="down('Menu2')" onmouseout="up('Menu2')"> 
URL 1<br> 
URL 2<br> 
URL 3<br> 
URL 4<br> 
URL 5<br> 
URL 6<br> 
URL 7<br> 
URL 8<br> 
</div> 
</div> 

<div id="Menu3" onmouseover="down('Menu3')" onmouseout="up('Menu3')"> 
URL 1<br> 
URL 2<br> 
URL 3<br> 
URL 4<br> 
URL 5<br> 
URL 6<br> 
URL 7<br> 
URL 8<br> 
</div> 
</div> 

<TABLE cellSpacing=0 cellPadding=0 BORDER=1 WIDTH=100%> 
<TBODY> 
<TR> 
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu1')" onmouseout="up('Menu1')">MENU 1</span> 
</TD> 
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu2')" onmouseout="up('Menu2')">MENU 2</span> 
</TD> 
<TD align=middle CLASS="TDHREFMENUS"><span onmouseover="down('Menu3')" onmouseout="up('Menu3')">MENU 3</span> 
</TD> 
</TR> 
</TBODY> 
</TABLE> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

<html> 
<head>

EDIT: Wenn ich getestet es funktionierte, wenn ich über ein einziges Menü schwebte, aber wenn ich schnell über ein paar der Menüs meine Maus bewegt, die erste Eines funktionierte, aber auch die anderen Menüs hörten auf.

Menu1 {position: absolute;

top:-190px; left:150px; 
font-size:15px;visibility:visible; 
background-color:#D0BCFE; 
width:114px;z-index:0;border-style:solid; 
}

Menü2 {Position: absolut;

top:-190px; left:580px; 
font-size:15px;visibility:visible; 
background-color:#D0BCFE; 
width:114px;z-index:0;border-style:solid; 
}

Menü3 {Position: absolut;

top:-190px; left:1005px; 
font-size:15px;visibility:visible; 
background-color:#D0BCFE; 
width:114px;z-index:0;border-style:solid; 
}

TD.TDHREFMENUS {font-size: 20; Farbe: rot; position: relative; z-Index: 0; background-color: # C4ABFE; border-style: solid; Breite: 114px;}

URL 1
URL 2
URL 3
URL 4
URL 5
URL 6
URL 7
URL8
URL 1
URL 2
URL 3
URL 4
URL 5
URL 6
URL 7
URL 8
URL 1
URL 2
URL 3
URL 4
URL 5
URL 6
URL 7
URL 8

MENU 1 MENU 2 MENU 3

Quelle

2011-01-05 user2105467

Es war viel weniger Horror ohne den Code-Block ... –

Das ist scheußlich. Verwenden Sie ein vorgefertigtes Menüsystem. – Raynos

Ihre <div> s nicht ausgleichen. Sie haben zwei schließende </div> s für jede öffnende.

Quelle

2011-01-05 20:13:36

Stimmt, und sollte angesprochen werden, aber ich glaube, es ist belanglos für das Problem erfahren :-) –

Durch das Löschen des Zeitlimits wird die Objektposition nicht zurückgesetzt, da die Variable mov freigegeben ist. Dies führt zu problematischen Operationen während der Übergänge. Sie erhalten den "letzten" Verschiebungswert, obwohl das neue Element, das verschoben wird, nicht entsprechend ausgerichtet ist.

Mögliche Fixes:

immer die Position Position aus dem CSS-Wert erhalten - dies wird hält eine pro-Punkt-Position (dies ist auch, wie Animation in jQuery funktioniert).
Halten Sie einen Lookup (oder verbindlich) pro Stück bewegen, die die Position hält. Obwohl, würde ich das erstere verwenden, da es einfacher ist.Für den nächsten Teil (Aufrechterhaltung der Timer-IDs) # 2 wird allerdings :-)

Zusätzlich verwendet werden Sie die Timer läuft, bis ein Betrieb halten müssen komplett war (nicht nur ein Übergang stattgefunden hat,). Das heißt, die gemeinsamen stopUp und Werte werden zu ähnlichen Problemen führen wie mit der obigen gemeinsamen mov. (Dies wird transparent mit jQuery-Animationswarteschlangen gehandhabt). Allerdings funktioniert # 1 von oben hier nicht gut. Lassen Sie uns also die Verwendung von # 2 mit Abschlussbindungen untersuchen - dies erfordert, dass die Klickereignisse im Code angehängt sind.

function addFlyout (elm) { 
    var timerId 
    elm.onmouseover = function() { 
     // now can use timerId and it will only be accessible 
     // to things within *this* invocation of addFlyout, including 
     // inside here. 
     timerId = setTimeout(function() { 
     ... 
     if (needToDoMore) { 
      // it's easy to reference the anonymous function inside 
      // with arguments.callee. alternatively, setInterval could be used 
      timerId = setTimeout(arguments.callee, ...) 
     } 
     }, ...); 
    } 
    elm.onmouseout = function() { 
     // ditto 
    } 
} 
... 
addFlyout(document.getElementById("Menu1"))

The Jibbering JS Closure Notes enthält viele nützliche Informationen. Dieser Ansatz könnte auch für mov verwendet werden, aber wie oben, denke ich, es ist einfacher, immer den aktuellen CSS-Wert in diesem Fall immer zu erhalten.

Überprüfen Sie auch Ihr Markup (vermeidet anderen Browser-Unsinn) und beachten Sie Probleme mit onmouseover/out - wenn das verschobene Element über das Element mit den Mausereignissen verschoben wird (oder die Form ändert), kann es Probleme geben Die Ereignisse werden ausgelöst oder verpasst.

Die Verwendung von jQuery - oder eines ähnlichen browserübergreifenden Frameworks - kann den Code vereinfachen und den obigen Fall trivial behandeln. (jQuery kommt sogar mit einem eingebauten in Animationsfunktion auch!)

jQuery (ohne eine vorgefertigte System), ähnlich wie etwas aussehen würde:

// get all elements to apply animation to 
var elements = $("#Menu1").add("#Menu2").add("#Menu3") 
elements.hover(function() { // over 
    $(this).stop().animate({top: 140}) 
}, function() { // out 
    $(this).stop().animate({top: 0}) 
})

Ratet mal, was ich empfehlen würde: -)

Glückliche Codierung.

Quelle

2011-01-05 20:19:43

clearTimeout funktioniert nicht wie erwartet

Menu1 {position: absolute;

Menü2 {Position: absolut;

Menü3 {Position: absolut;

Antwort

Verwandte Themen