JavaScript Div einblenden bei Mausbewegung

[jimi7777]

Hallo,

ich habe vor ein DIV immer dann einzublenden wenn die Maus bewegt wird. Und falls sie für eine gewisse Zeit zb (5 sek) nicht bewegt wird, soll dieses DIV wieder ausgeblendet werden. Mit JQuery funktioniert das Ein- und Ausblenden sehr gut.

document.onmousemove = function()
{
        $("#DIV-ID").fadeIn(5000);
}

Nur mein Problem ist, wie weiter...



Vielen Dank schon mal!

 

[Hancock]

Ne Idee:

setInterval(){
if(Date()-last>5 sekunden)
fade_out();
}
onmousemove(){
last=Date();
fade_in();
}

 

[1668mib]

Also mit den Methoden setTimeout() und clearTimeout() könnte man arbeiten...

bei MouseMove wird der Timeout resettet und wieder auf 5 Sekunden gesetzt... und am Ende des Timeouts wird der Div ausgeblendet...

var clearTimeoutId = 0;
function hideDiv()
{
        if (clearTimeoutId != 0) {
                window.clearTimeout(clearTimeoutId);
                clearTimeoutId = 0;
        }
        $("#DIV-ID").fadeOut(5000);  // oder anderer Code halt
}

function setClearTimeout()
{
        if (clearTimeoutId != 0) {
                window.clearTimeout(clearTimeoutId );
        }
        clearTimeoutId = window.setTimeout("hideDiv()", 5000);
}

// ...

document.onmousemove = function()
{
        $("#DIV-ID").fadeIn(5000);
        setClearTimeout();
}

 

[character]

SetTimeout kann man auch direkt eine Funktion anstatt eines Strings uebergeben.

 

[jimi7777]

vielen Dank an alle!!.. das mit dem TimeOut funktioniert gut

 

[sunics]

Guten Tag zusammen,

Irgendwie tut das bei mir nicht so wie es soll.
Div einblenden bei mausbewegung und ausblenden wenn die maus sich ne gewisse zeit nicht bewegt. .. Bei erneuter mausbewegung soll er wieder eingeblendet werden.

Der Div wird zwar eingeblendet aber nicht mehr aus.

woran kann das liegen?

http://jsfiddle.net/VYfc9/209/ das hier ist der code dazu.

Vielen Dank im Voraus!

 

[character]

Mach es so

window.setTimeout(hideDiv, 500);

statt so

window.setTimeout("hideDiv()", 500);

Weiter oben habe ich schon geschrieben, dass man setTimeout auch direkt die Funktion statt eines Strings uebergeben kann und so sollte man es grundsaetzlich auch machen. In deinem Fall geht es nicht anders.

 

[sunics]

Merci schon mal.

In Firefox funktioniert das.
IE und Safari nicht .. woran kann das liegen?

Dort siehts aus wie ein blinkender Div

 

[character]

Funktioniert bei mir in Firefox, Chrome (und damit WebKit), IE 7, 8 und 9.

 

[sunics]

Moinsen..

vielleicht eine ganz simple Frage.
Das mit dem ein und ausblenden funktioniert wie oben beschrieben.
nur was muss ich tun um das zu unterbrechen, wenn die maus sich über den eingeblendeten container befindet?

wenn sie diese dann wieder verlässt soll er das timeout wieder starten?

gruss