problem mit fadetoggle tab

[DBlog]

Geschlossen

Hallo hab folgendes Problem.

Ich möchte bei meiner Navbar einen tab über den ersten Tab der Navbar haben. Siehe Photo Tab5

Diesen Tab möchte ich über mouseover einblenden lassen.
Dann hat man auf den Tab geklickt, möchte ich, dass er wieder verschwindet ohne Animation.
Nun mein Problem.
Ich hab es geschafft, dass wenn man auf den Link klickt er verschwindet und wenn man nochmal über den Tab5 mit der Maus drüberfahrt und dann von Tab5 weg fahrt er verschwindet.
Fahrt man jedoch auf Tab1 und dann wieder weg (zB jemand fahrt über Tab1, Tab5 scheint auf, er will aber nicht darauf klicken ) dann bleibt Tab5 stehen. Das möchte ich verhindern.

Ich möchte das der Tab immer verschwindet wenn man ihn nicht benutzt bzw auf ihn klickt.

den Tab5 habe ich mit position fixed und top gelöst. Ich weiss es geht auch besser, doch weiss ich nicht wie.

Hier der Code

$('#nav_tab1').mouseover(function() {
      $('#nav_tab5').fadeToggle("slow", "linear");
    });
    
    $('#nav_tab5').mouseout(function() {
      $('#nav_tab5').fadeToggle("fast");
    });

 

[Cheffchen]

Hallo,


du musst das verbinden

$("#nav_tab1").mouseout(function(){
  
}).mouseover(function(){

});

du machst das jetzt aber nicht für jeden tap extra?

das macht man mit gruppen oder wie man das nennen kann.
also anstelle #nav_tab1 besser #nav.li wenn das ein li liste ist was es ja sein wird denn es sol ja wohl ein menü sein.
Dann kann man mit $(this) das aktuelle li ermitteln und ein vielleicht enthaltenen <span> sichtbar machen.
kommt aber halt auf dein wissen bzw. was möchtest stand ab.

Cheffchen

 

[DBlog]

vielen dank,
hat geklappt !

hab nur noch ein kleines Problem.
Wenn ich die Maus von unten nach oben bewege verschwindet das Tab fast.
was könnt ich da machen ?

 

[Cheffchen]

Hallo,

was heist "verschwindet das Tab fast."?
verschwindet es oder nicht?

ohne das zu sehen wieder bloss raten. Padding zwischen den elementen?

Cheffchen

 

[DBlog]

wenn die Maus auf den Tab ist verschwindet es. Wenn man schnell genug ist kann man aber noch auf den Tab klicken.
Ja es ist ein Lehrraum dazwischen.
Tab5 ist top 500px und die navbar 540 oder so. Wusste nicht wie ich es sonst lösen sollte

 

[Cheffchen]

Versteh nicht, ohne link kann man da auch nichts sagen.

Cheffchen

 

[Cheffchen]

hallö,

dann schau dir animate von jquery an.

cheffchen

 

[DBlog]

ich kenn animate() nur weiss ich net was das damit zum tun hat

mein Grundproblem liegt dabei das fährt man über tab1 taucht tab5 auf sobald man aber darüber fährt ist es wieder weg, fährt man von tab1 zb nach links zu tab2 verschwindet es auch was ich haben will.

ich möchte einfach beim mouseover des tab1 eine Anzeige haben und geht die Maus dann davon weg soll es wieder verschwinden.

 

[Tronjer]

Wenn man nicht vorwärts kommt, geht man eben wieder einen Schritt zurück. So wirklich schlau werde ich aus deiner Fragestellung auch nicht, sehe aber ein Grundproblem mit inkonsistentem Code.

Du hast zwei Container übereinander. Der obere besitzt ein mousein() und der untere ein mouseout(), dazu liegt auf beiden noch ein fadeToggle(). Um konsistent zu werden würde ich den Containern stattdessen ein hover() geben, mit fadeIn() und fadeOut() in den entsprechenden Callbacks. Soll jetzt beim Klicken auch noch etwas passieren, benötigst du einen weiteren Eventhandler: click().

Halte es so einfach wie möglich. Erstelle eine neue Datei, fang mit #Nav5 an und schreibe in die Callbacks für fadeIn() und fadeOut() einfach einen Text á la console.log('fade in'). Anschließend füge den Klickhandler hinzu und gib ihm die gewünschten Eigenschaften. Funktioniert alles, baue im zweiten Schritt #Nav1 und wiederhole den Vorgang. Simplyfying is the way to win.

Nebenbei bemerkt: Wenn du position: fixed benötigst, solltest du vielleicht noch einen Schritt zurückgehen und erstmal CSS erlernen.

 

[DBlog]

danke für die Antwort nur funktioniert bei mir aus irgendeinen Grund gar nichts.

hab hier ein Beispiel damit ihr versteht was ich meine

jQuery

oben bei contribute, fährt man mit der Maus drüber öffnet sich ein Dropdown, fährt man dann zB zu Event schliesst sich das Dropdown wieder.
Ich will genau das selbe nur nachoben und mit einer fade Animation