Mouseenter muss für zwei Sekunden bestehen

Hi,

habe ein kleines Problem mit meinem JS/jQuery Script

Ich habe eine Bar an der Oberseite, die bei mouseenter runterfährt und bei mouseleave wieder hochfährt. Soweit so gut. Desweiteren hab ich noch eine mouseover die das Geschwindigkeitsverhalten der Bar steuert.

Funktioniert soweit alles, stehe nun aber vor einem kleinen Problem.

Ich möchte, dass das mouseenter erst gefeuert wird, wenn der Benutzer sich für ein oder zwei Sekunden innerhalb des Divs aufhält.

Hier sind mal meine Drei funktionen die ich verwende

Die mouseenter die fürs runterfahren verantwortlich ist

var slider_state = false;   // slider up/down
var active_slide = false;   // is animation still in process

 $("div#toppanel").mouseenter(function() {  
            if(slider_state == false && active_slide == false) {
                active_slide = true;
               $("div#panel").slideDown("300", function() { active_slide = false; } )  
            }
         slider_state = true;
    });

Die mouseleave fürs hochfahren

 $("div#toppanel").mouseleave(function() {  
        if(slider_state == true && active_slide == false) {
            active_slide = true;
            $("div#panel").slideUp("300", function() { active_slide = false; })  
        }
        slider_state = false;
    });

und zuletzt noch die mouseover, die dafür sorgt, dass die bar immer hochfährt wenn man sich irgendwo anders mit der maus befindet

$('#contentwrap').mouseover(function() {  
       $("div#panel").slideUp("300", function() { active_slide = false; })  
     });

Meine Frage ist nun, wie muss ich die mouseenter umschreiben, dass er ein/zwei sekunden warten und prüft ob die maus sich immernoch innerhalb des divs befindet ?

Danke für eure Hilfe

Please also mark the comments that contributed to the solution of the article

Content-Key: 176049

Url: https://administrator.de/contentid/176049

Printed on: April 20, 2024 at 02:04 o'clock

2 Comments

Latest comment

Ich hatte ein ähnliches Problem mit einer Sucheingabe Maske, da sonst der $.ajax sofort gefeuert werden würde, jedesmal wenn ich eine Taste drücke.

ich habe das (sicherlich nicht schön aber funktionell) folgendermaßen gelöst:

	var d	= 1000; 
	var st	= null; 
	$("#Filter").live('keydown keypress keyup', function() {  
		if(st) {clearTimeout(st);}
	    var type = $("#Filter").attr('rel');  
	    switch (type) {
		    case 'getCustomers': st = setTimeout(getCustomers, d); break;  
		    case 'getConstructions': st = setTimeout(getConstructions, d); break;  
		    case 'getConstructionLoggers': st = setTimeout(getConstructionLoggers, d); break;  
		    case 'getConstructionDetails': st = setTimeout(getConDs, d); break;  
		    case 'getProducers': st = setTimeout(getProducers, d); break;  
		    case 'getModules': st = setTimeout(getModules, d); break;  
		    case 'getInverters': st = setTimeout(getInverters, d); break;  
		    case 'getLoggers': st = setTimeout(getLoggers, d); break;  
	    }
	});

Kurz zur Erläuterung folgende Dinge:
- .live deshalb, da ich die Seite bzw. Teile davon nachlade, sofern also bei Dir alles statisch ist, kannst Du Dir .live sparen
- $("#Filter") ist das entsprechende Feld, dass auf key* actions reagiert und ausgeführt wird
- d stellt den timer dar
- solange eine Taste gedrückt wird, wird praktisch ein setTimeout(-function-) gemacht der dann nach d ms aufgerufen werden würde, ausser es kommt eine neue key* action ins Spiel.

Wiegesagt, quick and dirty und sicherlich nicht optimal, aber für mich hats auf die Schnelle gereicht.

Danke für deinen Beitrag, aber ich habe es folgendermaßen gelöst:

beim mouseenter wirddem toppanel div ne klasse "hasFocus" zugewiesen. Das event wird dann immer mittels setTimeout um x millisekunden verzögert.
bei mouseleave wird dem div immer die klasse "hasFocus" entzogen.

Der Trick ist jetzt, dass innerhalb des setTimeouts nochmals auf die klasse hasFocus geprüft wird.

Hier der Quellcode für interessierte

$("div#toppanel").mouseenter(function() {  
        $("div#toppanel").addClass("hasFocus");             //Focus Klasse hinzufügen  
        setTimeout(function() {
            if($("div#toppanel").hasClass("hasFocus")) {    //auf Focus Klasse Prüfen  
                if(!slider_state && !active_slide) {
                    active_slide = true;
                   $("div#panel").slideDown("300", function() { active_slide = false; } )  
                }
                slider_state = true;
            }
        }, 500 );                                       //Timeout in ms
    });

    $("div#toppanel").mouseleave(function() {  
        if(slider_state && !active_slide) {
            active_slide = true;
            $("div#panel").slideUp("300", function() { active_slide = false; })  
        }
        slider_state = false;
        $("div#toppanel").removeClass("hasFocus");      //Focus Klasse immer entziehen  
    });