Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

gelöst Mouseenter muss für zwei Sekunden bestehen

Mitglied: Boingboing

Boingboing (Level 1) - Jetzt verbinden

10.11.2011, aktualisiert 09:43 Uhr, 4439 Aufrufe, 2 Kommentare

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

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
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
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
Mitglied: msr972
10.11.2011 um 12:39 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:

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.
Bitte warten ..
Mitglied: Boingboing
10.11.2011 um 14:21 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

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-mouseover-mit-jquery/
Bitte warten ..
Ähnliche Inhalte
Ubuntu

Verzeichnisse bestehen nur noch aus "???"

gelöst Frage von D1Ck3nUbuntu2 Kommentare

Hallo zusammen, ich habe mir ein Shell Skript (auf einem Ubuntu 12.04 LTS) geschrieben um ein FTP-Verzeichnis lokal zu ...

Microsoft Office

Leeres Fenster bleibt bestehen

Frage von Ghost108Microsoft Office1 Kommentar

Hallo zusammen, ich habe folgende "Problematik" Ich öffnen Excel 2016 und erhalte eine leere Arbeitsmappe Hier gehe ich nun ...

Suse

Druckjob unter Suse-LInux bleibt bestehen

Frage von didi60Suse

Guten Tag zusammen, das Ziel ist über Linux raw-Daten an Drucker zu senden. Im Moment existieren 2 Drucker, die ...

PHP

Logout auf Website - Sessoin bleibt bestehen

Frage von IT-CallePHP4 Kommentare

Hallo, ich habe ein Problem, das wiefolgt aussieht. Ich logge mich ganz normal auf einer Website ein (Lokal mit ...

Neue Wissensbeiträge
Humor (lol)

Erstaunlich, Windows mit extremer Laufzeit (Server) lol

Tipp von mathu vor 1 StundeHumor (lol)2 Kommentare

Was es so alles gibt. :-)

Windows Netzwerk

CGM Praxisarchiv funktioniert auf Clients nach Update auf 4.14 nicht mehr

Tipp von MOS6581 vor 19 StundenWindows Netzwerk

Moin, ein Kunde setzt das CGM-Praxisarchiv ein. Mehrplatzinstallation mit SQL-Server. Nachdem letzte Woche auf die 4.14 aktualisiert wurde, funktionierte ...

Windows 10

Windows 10 - Storage Sense - neues herstellerseitiges Cleaning-Tool statt cleanmgr

Tipp von mathu vor 1 TagWindows 102 Kommentare

Vermutlich ab dem Oktoberrelease wird eine neue Speicherbereinigungssuftware ausgeliefert von Microsoft. Cleanmgr.exe soll angeblich aber noch weiter parallel verfügbar ...

E-Mail
Neueste Masche der Bad Guys: Offene Erpressung
Information von the-buccaneer vor 2 TagenE-Mail15 Kommentare

"Warum den komplizierten Weg über einen Kryptotrojaner nehmen, wenn man die Leute auch direkt erpressen kann?" haben sich wohl ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
Kombiniere mehrere 4G Router zu einem Netzwerk - Anwendung kleine LAN (10-20 Leute)
Frage von HulkTheHeroLAN, WAN, Wireless24 Kommentare

Guten Mittag liebes Administrator - Fourm, ich hoffe ich habe das richtige Thema ausgewählt - ansonsten bitte gerne verschieben ...

Windows Server
Fileserver von 2012 R2 auf 2012R2
gelöst Frage von ThabeusWindows Server23 Kommentare

Moin moin, leider war in der Vergangenheit der Fokus des Betriebs nicht auf Langfristigkeit ausgelegt. Daher stehe ich jetzt ...

Hyper-V
Windows Serer 2016 Standard virtualisieren
gelöst Frage von fritte87Hyper-V18 Kommentare

Hallo zusammen, ich muss für eine kleine Firma ein entsprechendes neues kleines Konzept bauen. Ich habe einen Server Standard ...

Router & Routing
Größere Zahl VPN-Verbindungen mit Fritz-Box einrichten
Frage von miscmikeRouter & Routing15 Kommentare

Hallo Zusammen, ich supporte verschiedene Kunden mit bestehenden LAN-LAN-Kopplungen via FritzBox (7490, FritzOS 7.01) . Anwendungen sind z.B. Kaspersky-KSC ...