JavaScript Div Ein- / Ausblenden

[sunics]

Hallo Zusammen,

wie hier in diesem Beitrag https://www.computerbase.de/forum/threads/div-einblenden-bei-mausbewegung.1020981/
bereits beschrieben, funktioniert das bei mir soweit ganz gut.

Ein problem: Was muss ich machen, dass die divs eingeblendet bleiben, wenn die maus über den eingeblendeten Div liegt.

Guss

 

[mercsen]

kannst mal den code posten?

sonst einfach mal das timeout entfernen, aber wenn uns deinen code zeigst ists wohl leichter

 

[sunics]

http://jsfiddle.net/VYfc9/309/

das ist der code dazu.

 

[mercsen]

Hmmm okay,

also anhand des codes schließe ich das du so gut wie keinerlei erfahrungen mit JavaScript hast?

ich versuche mal dei problem zu verstehen. Du möchtest das dass Div genau solange angezeigt wird, solange die maus drüber ist und sobald sie das div wieder verlässt, soll es verschwinden?

Als erstes musst du mal das setClearTimeout(); auskommentieren.
Das bewirkt ja eigentlich nur das dass Div wieder ausgeblendet wird, leider ist die methode falsch implementiert, sodass sie nie ausgeführt wird
Aber ich denke du brauchst die eh net, ehe ich mir hier aber was zurecht bastle will ich erstmal wissen ob ich dein anliegen richtig erfasst habe.

 

[sunics]

Hallo,

vielen Dank für Deine Antwort. Meine Kenntnisse in sachen JavaScript sind dürftig, bzw beschränken sich aufs wesentlichste.

Die Aufgabenstellung ist wie folgt:
Es gibt einen Div-Container, der sich über den ganzen Bildschirm erstreckt.
Beim Aufrufen der Seite werden zunächst alle Container eingeblendet, aber nach 2 Sekunden ausgeblendet, sofern die maus nicht bewegt wird.

Wird nun die maus wieder bewegt, sollen die Div-Container wieder eingeblendet werden.
und wenn die Maus sich wieder 2 Sekunden lang bewegt wieder aus (usw.)

Wandert man nun mit der Maus über einen eingeblendeten Div-Container (z. B. Menü)
soll die Ausblendfunktion solang ausser Kraft gesetzt werden bis man den Div-Container wieder verlässt.

ein Beispiel dazu ist: http://www.hotelnationalzermatt.ch

Vielen Dank im Voraus für Hinweise!

 

[mercsen]

Hmm ich hab gerade nicht die zeit dir das in code form zu präsentieren, morgen könnte ich es schaffen.
Aber hier mal ein Überlegung:

Sobald jemand die Seite betritt haben alle elemente eine sichtbarkeit (opacity) von 1.0.
Gleichzeitig wird ein Countdown gestratet

globale_timout_var = null;
$(document).ready(function() {
            globale_timeout_bar = setTimeout();
             // Hier wird ein handle auf den Timeout angelegt
             // um ihn später unterbrechen zu können
}

sobald der runtergezählt hat blendet der alle div felder aus.
Die funktion dazu hast du ja

Nun musst du einfach folgendes machen:
Du weißt JEDEM div element 2 handler zu: mouseenter und mouseleave
am besten nutzt du dazu die jquery.on() methode (zu platzieren in der ready() function)

// das folgende stoppt dencountdown wenn die maus ein element betritt
$(document).on('mouseenter','div', function(evt) { clearTimeout(globale_timeout_var); });
// Das nächste startet den countdown erneut wenn man ein div verlässt
$(document).on('mouseleave','div', function(evt) { globale_timeout_var = setTimeout(abc) });

um rauszufinden ob die maus bewegt wurde am besten auf das Objekt 'document' einen onmousemove handler registrieren der jedesmal einen neuen countdown startet, k.a. wie das sonst gehen sollte.

wie gesagt morgen könnte ich dir das vlt. ausführlicherer erläutern

 

[sunics]

Hallo,

Danke für Deine Hinweise!
ich glaube, ich habe des Rätsel's Lösung;

http://jsfiddle.net/VYfc9/320/

http://jsfiddle.net/VYfc9/321

Das ist nun das fertige Script.