Heiß diskutierte Fragen

Frage ist gelöst
Mouseenter muss für zwei Sekunden bestehen

Boingboing
Level 1 - Frischling
10.11.2011
09:18:44 Uhr
707 Aufrufe
2 Antworten
ID: 176049

Noch nicht bewertet

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;
    });01.
var slider_state = false;   // slider up/down 
02.
var active_slide = false;   // is animation still in process 
03.
 
04.
 $("div#toppanel").mouseenter(function() { 
05.
            if(slider_state == false && active_slide == false) { 
06.
                active_slide = true; 
07.
               $("div#panel").slideDown("300", function() { active_slide = false; } ) 
08.
            } 
09.
         slider_state = true; 
10.
    });

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;
    });01.
 $("div#toppanel").mouseleave(function() { 
02.
        if(slider_state == true && active_slide == false) { 
03.
            active_slide = true; 
04.
            $("div#panel").slideUp("300", function() { active_slide = false; }) 
05.
        } 
06.
        slider_state = false; 
07.
    });

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; })
     });01.
$('#contentwrap').mouseover(function() { 
02.
       $("div#panel").slideUp("300", function() { active_slide = false; }) 
03.
     });

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

Diskussionsverlauf (2 Antworten)

msr972 schreibt am 10.11.2011 um 12:39:21 Uhr
- Boingboing schreibt am 10.11.2011 um 14:21:38 Uhr

Top

msr972 schreibt am 10.11.2011 um 12:39:21 Uhr

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;
	    }
	});01.
	var d	= 1000;  
02.
	var st	= null;  
03.
	$("#Filter").live('keydown keypress keyup', function() { 
04.
		if(st) {clearTimeout(st);} 
05.
	    var type = $("#Filter").attr('rel'); 
06.
	    switch (type) { 
07.
		    case 'getCustomers': st = setTimeout(getCustomers, d); break; 
08.
		    case 'getConstructions': st = setTimeout(getConstructions, d); break; 
09.
		    case 'getConstructionLoggers': st = setTimeout(getConstructionLoggers, d); break; 
10.
		    case 'getConstructionDetails': st = setTimeout(getConDs, d); break; 
11.
		    case 'getProducers': st = setTimeout(getProducers, d); break; 
12.
		    case 'getModules': st = setTimeout(getModules, d); break; 
13.
		    case 'getInverters': st = setTimeout(getInverters, d); break; 
14.
		    case 'getLoggers': st = setTimeout(getLoggers, d); break; 
15.
	    } 
16.
	});

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.

Top

Boingboing schreibt am 10.11.2011 um 14:21:38 Uhr

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
    });01.
$("div#toppanel").mouseenter(function() { 
02.
        $("div#toppanel").addClass("hasFocus");             //Focus Klasse hinzufügen 
03.
        setTimeout(function() { 
04.
            if($("div#toppanel").hasClass("hasFocus")) {    //auf Focus Klasse Prüfen 
05.
                if(!slider_state && !active_slide) { 
06.
                    active_slide = true; 
07.
                   $("div#panel").slideDown("300", function() { active_slide = false; } ) 
08.
                } 
09.
                slider_state = true; 
10.
            } 
11.
        }, 500 );                                       //Timeout in ms 
12.
    }); 
13.
 
14.
    $("div#toppanel").mouseleave(function() { 
15.
        if(slider_state && !active_slide) { 
16.
            active_slide = true; 
17.
            $("div#panel").slideUp("300", function() { active_slide = false; }) 
18.
        } 
19.
        slider_state = false; 
20.
        $("div#toppanel").removeClass("hasFocus");      //Focus Klasse immer entziehen 
21.
    });

Danke an Bytelude für seinen Beitrag: Verzögertes MouseOver/Hover mit jQuery
http://bytelude.de/2011/03/30/verzogertes ...

mehr ...Ähnliche Beiträge

Frage ist gelöstMouseenter muss für zwei Sekunden bestehen

BoingboingLevel 1 - Frischling10.11.201109:18:44 Uhr707 Aufrufe2 AntwortenID: 176049

Frage ist gelöst
Mouseenter muss für zwei Sekunden bestehen

Boingboing
Level 1 - Frischling
10.11.2011
09:18:44 Uhr
707 Aufrufe
2 Antworten
ID: 176049