jQuery - Ungewollte Verzögerung bei .hide() durch .hover

CTS-X · 21. Februar 2018

Hallo zusammen! Ich habe mir ein eigenes Dropdown Skript gebastelt. Es sind drei nebeneinander liegende Icons und jeweils deren Dropdown Menü.

Im 1. Code die Details dazu was was ist.

1. Icon:

Code

$(function() {
    $("#interneLinksIcon a").mouseover(function(){            /1. Icon
     $("#interneLinksIcon a").css({ opacity: 0.5 });      /Manueller Hover-Effekt über dem Icon 
     $("#DropwdownDreieck a").css({ opacity: 0.5 });
     $('#externeLinks').hide();                           /Dropdown 2. Icon ausblenden
     $('#Meldungen').hide();                              /Dropdown 3. Icon ausblenden
     $('#interneLinksCon').delay(50).slideDown(400);
    });
    $("#interneLinksIcon a").mouseout(function(){
     $("#interneLinksIcon a").css({ opacity: 0.9 });      /Hover-Effekt entfernen
     $("#DropwdownDreieck a").css({ opacity: 1.0 });
     $('#interneLinksCon').delay(200).hide(0);            /Dropdown ausblenden 
    });                                                   /Delay gibt dem User die Chance das Dropdown zu "berühren" bevor es
    });                                                   /durch Icon-Mouseout geschlossen wird

    
    $('#interneLinksCon').mouseover(function() {
        $('#interneLinksCon').stop();                     /Dropdown Animation unterbrechen und Menü sofort anzeigen,
        $('#interneLinksCon').fadeIn(0);                  /falls der Nutzer schneller runter scrollt als die Animation ist
        $("#interneLinksIcon a").css({ opacity: 0.5 });   /Manueller Hover-Effekt über dem Icon so lange man im Menü ist
        $("#DropwdownDreieck a").css({ opacity: 0.5 });
    }); 
    
    $('#interneLinksCon').mouseleave(function() {
        $("#interneLinksIcon a").css({ opacity: 0.9 });   /Hover-Effekt entfernen
        $("#DropwdownDreieck a").css({ opacity: 1.0 });
        $('#interneLinksCon').fadeOut(400);               /Dropdown ausblenden
        return false;                                     /fadeOut zusammen mit .stop() beim mouseover ermöglicht zurückkehren
    });                                                   /falls Dropdown verlassen eigentlich nicht gewünscht war

Alles anzeigen

2. Icon:

Code

$(function() {
    $("#externeLinksIcon a").mouseover(function(){
     $("#externeLinksIcon a").css({ opacity: 0.5 });
     $("#DropwdownDreieck_1 a").css({ opacity: 0.5 });
     $('#Meldungen').hide();
     $('#interneLinksCon').hide();
     $('#externeLinks').delay(50).slideDown(400);
    });
    $("#externeLinksIcon a").mouseout(function(){
     $("#externeLinksIcon a").css({ opacity: 0.9 });
     $("#DropwdownDreieck_1 a").css({ opacity: 1.0 });
     $('#externeLinks').delay(200).hide(0);
    });
    });    
    
    $('#externeLinks').mouseover(function() {
        $('#externeLinks').stop();
        $('#externeLinks').fadeIn(0);
        $("#externeLinksIcon a").css({ opacity: 0.5 });
        $("#DropwdownDreieck_1 a").css({ opacity: 0.5 });
    });
    
    $('#externeLinks').mouseleave(function() {
        $("#externeLinksIcon a").css({ opacity: 0.9 });
        $("#DropwdownDreieck_1 a").css({ opacity: 1.0 });
        $('#externeLinks').fadeOut(400);
        return false;
    });

Alles anzeigen

3. Icon:

Code

$(function() {
    $("#Container_3 a").mouseover(function(){
     $("#Container_3 a").css({ opacity: 0.5 });
     $("#DropwdownDreieck_2 a").css({ opacity: 0.5 });
     $('#interneLinksCon').hide();
     $('#externeLinks').hide();
     $('#Meldungen').delay(50).slideDown(400);
    });
    $("#Container_3 a").mouseout(function(){
     $("#Container_3 a").css({ opacity: 1.0 });
     $("#DropwdownDreieck_2 a").css({ opacity: 1.0 });
     $('#Meldungen').delay(200).hide(0);
    });
    });    
    
    $('#Meldungen').mouseover(function() {
        $('#Meldungen').stop();
        $('#Meldungen').fadeIn(0);
        $("#Container_3 a").css({ opacity: 0.5 });
        $("#DropwdownDreieck_2 a").css({ opacity: 0.5 });
    });
    
    $('#Meldungen').mouseleave(function() {
        $("#Container_3 a").css({ opacity: 1.0 });
        $("#DropwdownDreieck_2 a").css({ opacity: 1.0 });
        $('#Meldungen').fadeOut(400);
        return false;
    });

Alles anzeigen

Im Anhang noch Screens.

Mein Problem: Bei hover über das nächste Icon sollen sofort (!) die Dropdowns der anderen Menüs ausgeblendet werden. Passiert aber nicht. Es gibt teils starke Verzögerungen. Solange ich gemütlich über die Icons gehe ist alles gut. Sollte ein User aber schnell mal drüber wischen gibt es erst einmal alle drei Dropdowns die dann erst nach und nach verschwinden. Klar nur Sekündchen, max., aber schön ist das nicht.

Hatte es auch mit .stop() und danach .hide() versucht. Aber das bringt keine Beschleunigung sondern nur noch mehr Unruhe.

basti1012 · 21. Februar 2018

kannst du mal den html und css teil mit posten .Weil ich denke das geht auch alles viel einfacher

basti1012 · 21. Februar 2018

Wie währen es hier mit? ohne Javascript

*** Link entfernt, weil nicht mehr erreichbar ***

Ging nicht schöner auf der schnelle . Aber solange du das nicht liest, arbeite ich noch dran

EDIT so habe es noch etwas verschönert . das ein und ausblenden kannst du in den keyframes ja einstellen wie schnell es sein soll

CTS-X · 22. Februar 2018

Danke dir für deine Mühe! Hatte nur gehofft, dass vielleicht eine Rückmeldung zur jQuery kommt und deswegen noch gewartet.

Der ganze HTML Brocken hilft dir nicht viel. An sich hast es richtig verstanden. Dropdowns die mit CSS gestaltet aber erstmal ausgeblendet sind. Icons ohne direkte Funktion. jQuery übernimmt den Rest.

Deine CSS Lösung müsste ich mir mir in Ruhe mal durchschauen und überlegen, ob und wie ich das bei mir einbringen kann.

Nur eine Frage: was ist das?

Code

@keyframes los1{
  0% {
    opacity:1;
  }
  100%{
    opacity:0;
  }
}

Bzw. was es tut ist klar. Aber da ich kein freies CSS hab, sondern an einer Software-Oberfläche mit Element Zuweisung kratze fehlt mir die Zuordnung.
"Unfreie" Software-Arbeit ist Fluch und Segen zugleich. Siehe Anhang.
Also natürlich kann ich CSS Regeln hinzufügen und bearbeiten. So werde ich auch "a:focus + .submenu_list" problemlos als neue Regel hinzufügen können.

basti1012 · 22. Februar 2018

der@keyframe blendet das menü ein und aus .Ich sage mal das simuliert dein fadeIn() und fadeOut() was du mit jquery gemacht hast macht jetzt so das css.

Was meinst du mit element zuweisung ?inline styls? Du kannst keyframes auch mit javascript einbinden,fals du keine css datei verwenden kannst

CTS-X · 22. Februar 2018

Ja das ist klar. Sorry schlecht ausgedrückt.

Also ist der @keyframe ein eigenes Element? Frage klingt schön blöd... Mir geht es nur darum ob ich es einem Element zuweisen soll/kann oder neu Anlegen und referenzieren muss. Wie dann auch immer.

Mit der CSS Datei bringst mich auf eine Idee. Gibt sicher eine Backdoor um CSS einzubinden ohne die Softwareoberfläche zum layouten zu nutzen... hmmm.

basti1012 · 22. Februar 2018

@keyframe ist kein element ,das ist keine ahnung was aber kein element .ist eigentlich ein style anweising oder so. Du kannst es elementen zuweisen das bestimmte elemente das machen sollen was da drinne steht. Wie das jetzt genau nennt was das ist weiß ich auch nicht

jQuery - Ungewollte Verzögerung bei .hide() durch .hover

Jetzt mitmachen!

Teilen