[Erledigt] jQuery - ul anzeigen bei mouseover

taurus · 10.02.2011, 21:14

Hi,

bin gerade dabei mich in jquery einzuarbeiten.. und stehe vor einem kleinen problem.

ich möchte die untermenüs faden.. dazu folgender code:

PHP-Code:

     <script>

     $(document).ready(function(){

       $("#Navigation li").mouseover(function(event){

         $("#Navigation li ul").fadeIn(600);

 
       });

     });

   </script>

 
 
<ul id="Navigation">

    <li><a href="/1">1</a></li>

    <li><a href="#">2</a>

        <ul>

            <li class="li_topic">        

                <li><a href="1">1</a></li>

                <li><a href="2">2</a></li>

        </ul>

    </li>

    <li><a href="/3">3</a></li>

    <li><a href="#">4</a>

        <ul>

            <li class="li_topic">        

                <li><a href="1">1</a></li>

                <li><a href="2">2</a></li>

        </ul>

    </li>

nun wird aber eim überfahren von li nicht nur eines der beiden ul angezeigt sondern beide auf einmal. ich komm aber nicht dahinter wie ich den sagen kann "fade nur das nachfolgende element ein bei dem mouseover wirkt. nicht alle nachfolgenden..

klar könnte ich classen namen vergeben.. aber das geht doch auch anders? mit css selektoren.. aber "#navigation li ul" müsste doch passen?

Chriz · 10.02.2011, 22:38

Statt $("#Navigation li ul") mal $(this).find("ul") verwenden. Wenn du $("#Navigation li ul") schreibst selektiert das nunmal dokumentenweit alle, die darauf passen (eben deine 2), deshalb musst du relativ oft bei solchen verschachtelten Geschichten $(this) verwenden. Evtl. klappt mein Vorschlag nicht, weil $(this) trotzdem auch auf alle greift (weils eine Objektliste ist), dann alternativ mal

Code:

$("#Navigation li").each(function() {
  var thisJ = $(this);
  thisJ.mouseover(function(event) { 
    thisJ.find("ul").fadeIn(600); 
  });
});

probieren, aber ich glaub jQuery kann auch die erste Variante.

nikosch · 11.02.2011, 00:28

Geht auch einfacher:

PHP-Code:

  $("ul" , this).fadeIn(600);

Zitat:

weil $(this) trotzdem auch auf alle greift (weils eine Objektliste ist)

Eigentlich nicht. this sollte den aktuell verarbeiteten Node aus der Liste adressieren.

tr0y · 11.02.2011, 02:36

Um Nikosch und Chriz noch mal zu untermauern und dir zu zeigen was du da selektierst:

CSS: #Navigation li
SGML-XQuery: //*[@id='Navigation']/li

Code:

<ul id="Navigation">
   <li><a href="/1">1</a></li>
   <li><a href="#">2</a> 
      <ul> 
         <li class="li_topic"></li>         
         <li><a href="1">1</a></li>
         <li><a href="2">2</a></li>
      </ul> 
   </li>
   <li><a href="/3">3</a></li>
   <li><a href="#">4</a> 
      <ul> 
         <li class="li_topic"></li>    
         <li><a href="1">1</a></li>
         <li><a href="2">2</a></li>
      </ul> 
   </li>
</ul>

CSS: #Navigation li ul
SGML-XQUERY: //*[@id='Navigation']/li/ul

Code:

<ul id="Navigation">
   <li><a href="/1">1</a></li>
   <li><a href="#">2</a> 
      <ul> 
         <li class="li_topic"></li>
         <li><a href="1">1</a></li>
         <li><a href="2">2</a></li>
      </ul> 
   </li>[/color]
   <li><a href="/3">3</a></li>
   <li><a href="#">4</a> 
      <ul> 
         <li class="li_topic"></li>    
         <li><a href="1">1</a></li>
         <li><a href="2">2</a></li>
      </ul> 
   </li>
</ul>

Also:

Code:

$(document).ready(function(){ 
   $("#Navigation li").mouseover(function(){ 
      $(this).find("ul").fadeIn(600);
   });
});

Aber, keine halben sachen, was ausklappt, klappt auch wieder ein...

Code:

$(document).ready(function(){
   $("#Navigation li").mouseover(function(){
      $(this).find("ul").fadeIn(600);
   }).mouseout(function(){
      $(this).find("ul").fadeOut(600);
   });
});

rudygotya · 11.02.2011, 11:35

Sorry, aber das ist immer noch Murks.

Wenn man mit Effekten arbeitet und sowohl ein- wie ausfährt, sollte man darauf achten, dass die Animation beendet wird, wenn man das Element 2 mal schnell hintereinander hovert. Erst Recht bei 600ms duration.
Siehe jquery stop sowie :animated

Statt mouseover sollte man lieber mouseenter und focus binden. Sonst bubbled das Event nach oben, wenn man das innere ul hovered. Nach dem Traversing auf alle inneren ul-Elemente würde ich noch ein .first() anhängen.

Meiner Meinung nach besser so:

PHP-Code:

  $(function () {
    var $navi = $("#Navigation")
    $navi
        .delegate(
            'li',
            'mouseenter focus',
            function () {
                $navi.find(':animated').stop(true, true);
                $(this).find('ul').first().fadeIn(600);
            }
        )
        .delegate(
            'li',
            'mouseout blur',
            function () {
                $navi.find(':animated').stop(true, true);
                $(this).find('ul').first().fadeOut(600);
            }
        )
});

Grüße

Basti

tr0y · 11.02.2011, 11:55

Ist ein Argument, ich bin davon ausgegangen das fade*() automatisch laufende Animationen auf dem Node stoppt. ( MooTools fader tun das, ich nutze primär mootools nicht jquery ). Ich hab den Quellcode hier nur adaptiert ( meiner angedachten logik nach )

taurus · 20.02.2011, 16:16

danke, das war schon alles sehr hilfreich, jetzt bin ich wieder etwas schlauer...
aber...!

das ganze funktioniert in meinem fall nicht wie gewollt..

die funktion hat probleme mit meinem navi da ich das untermenü ein stück weit hochschiebe und somit das li verdecke mit dem das untermenü erscheint(wegen grafischen elementen kann ich das nur so machen..)

aber.. nicht so schlimm.. hab jetzt eine klasse eingebunden
http://berndmatzner.de/jquery/hoveraccordion/

funktioniert bestens... trotzdem danke

anbei nochmal ein stück code mit dem ich ein div ein bzw ausblende.. was meint ihr dazu? (funktioniert bis auf das "inhalt" während der anim verschoben wird und die animation bei schnellem klicken immer komplett abläuft anstatt ab dem punkt wo die letzt anim gestoppt wurde.. such gerade wie man das noch lösen kann

)

PHP-Code:

  <script type="text/javascript" src="/classes/jquery.js"></script>

 
<script type="text/javascript">

 
$(document).ready(function() {

 
    $("#ext").css({"display":"block"});

    $("#ext_div").css({"display":"none"});

    $("#ext").toggle(function() {

        $("#ext_div").stop(true,true);

        $("#ext_div").show("slow");

        $(this).text("ausblenden");

 
    }, function() {

        $("#ext_div").stop(true,true);

        $("#ext_div").hide("slow");

        $(this).text("einblenden");

    

    });

 
});

 
</script>

 
</head>

<body>

 
 
<a href="#" id="ext" style="display:none;outline:none;">div</a>

<div id="ext_div" style="display:block;width:200px;height:200px;background-color:rgb(200,200,200);margin:50px 0 0;">

<p>inhalt</p>

</div>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Einfaches JQuery resize und scoll läuft nicht	smilla	JavaScript, Ajax und mehr	5	08.02.2011 20:44
JQUERY: 5 Bilder anzeigen, dann ausblenden und dann die nächsten laden?	sturmi	JavaScript, Ajax und mehr	5	30.01.2011 19:24
jQuery, einem DOM-Knoten eine Payload anhängen	Chriz	JavaScript, Ajax und mehr	6	22.12.2010 15:31
jQuery - Text an Cursorposition einfügen	Koala	JavaScript, Ajax und mehr	5	11.11.2010 21:28
Bin noch ein Anfänger mit jquery bitte um hilfe	bomber007	JavaScript, Ajax und mehr	4	19.08.2010 23:34
[Erledigt] jQuery Slider - In eine Richtung sperren	Trainmaster	JavaScript, Ajax und mehr	2	08.08.2010 16:06
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jQuery findet Element nicht	ByStones	JavaScript, Ajax und mehr	8	11.06.2010 14:03
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
Mehrere div's mit gleichen ID anzeigen / ausblenden	phpbeginner	HTML, Usability und Barrierefreiheit	9	06.09.2007 02:48
Baumstruktur anzeigen		PHP-Fortgeschrittene	13	31.03.2006 21:37
[Erledigt] Cookie - Seite anzeigen / nicht anzeigen		PHP Tipps 2004-2	2	11.11.2004 15:59
Alle Datenbanken und Tabellen anzeigen anzeigen	imported_Lumio	PHP Tipps 2004	4	13.09.2004 14:26

10.02.2011, 21:14
taurus Erfahrener Benutzer Registriert seit: 01.11.2008 Beiträge: 825 PHP-Kenntnisse: Anfänger	[Erledigt] jQuery - ul anzeigen bei mouseover Hi, bin gerade dabei mich in jquery einzuarbeiten.. und stehe vor einem kleinen problem. ich möchte die untermenüs faden.. dazu folgender code: PHP-Code: <script> $(document).ready(function(){ $("#Navigation li").mouseover(function(event){ $("#Navigation li ul").fadeIn(600); }); }); </script> <ul id="Navigation"> <li><a href="/1">1</a></li> <li><a href="#">2</a> <ul> <li class="li_topic"> <li><a href="1">1</a></li> <li><a href="2">2</a></li> </ul> </li> <li><a href="/3">3</a></li> <li><a href="#">4</a> <ul> <li class="li_topic"> <li><a href="1">1</a></li> <li><a href="2">2</a></li> </ul> </li> nun wird aber eim überfahren von li nicht nur eines der beiden ul angezeigt sondern beide auf einmal. ich komm aber nicht dahinter wie ich den sagen kann "fade nur das nachfolgende element ein bei dem mouseover wirkt. nicht alle nachfolgenden.. klar könnte ich classen namen vergeben.. aber das geht doch auch anders? mit css selektoren.. aber "#navigation li ul" müsste doch passen?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

10.02.2011, 22:38
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Statt $("#Navigation li ul") mal $(this).find("ul") verwenden. Wenn du $("#Navigation li ul") schreibst selektiert das nunmal dokumentenweit alle, die darauf passen (eben deine 2), deshalb musst du relativ oft bei solchen verschachtelten Geschichten $(this) verwenden. Evtl. klappt mein Vorschlag nicht, weil $(this) trotzdem auch auf alle greift (weils eine Objektliste ist), dann alternativ mal Code: $("#Navigation li").each(function() { var thisJ = $(this); thisJ.mouseover(function(event) { thisJ.find("ul").fadeIn(600); }); }); probieren, aber ich glaub jQuery kann auch die erste Variante. __________________ "Nuschel ich?" - "Was?"

11.02.2011, 11:35
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Sorry, aber das ist immer noch Murks. Wenn man mit Effekten arbeitet und sowohl ein- wie ausfährt, sollte man darauf achten, dass die Animation beendet wird, wenn man das Element 2 mal schnell hintereinander hovert. Erst Recht bei 600ms duration. Siehe jquery stop sowie :animated Statt mouseover sollte man lieber mouseenter und focus binden. Sonst bubbled das Event nach oben, wenn man das innere ul hovered. Nach dem Traversing auf alle inneren ul-Elemente würde ich noch ein .first() anhängen. Meiner Meinung nach besser so: PHP-Code: $(function () { var $navi = $("#Navigation") $navi .delegate( 'li', 'mouseenter focus', function () { $navi.find(':animated').stop(true, true); $(this).find('ul').first().fadeIn(600); } ) .delegate( 'li', 'mouseout blur', function () { $navi.find(':animated').stop(true, true); $(this).find('ul').first().fadeOut(600); } ) }); Grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

11.02.2011, 11:55
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Ist ein Argument, ich bin davon ausgegangen das fade*() automatisch laufende Animationen auf dem Node stoppt. ( MooTools fader tun das, ich nutze primär mootools nicht jquery ). Ich hab den Quellcode hier nur adaptiert ( meiner angedachten logik nach ) __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

20.02.2011, 16:16
taurus Erfahrener Benutzer Registriert seit: 01.11.2008 Beiträge: 825 PHP-Kenntnisse: Anfänger	danke, das war schon alles sehr hilfreich, jetzt bin ich wieder etwas schlauer... aber...! das ganze funktioniert in meinem fall nicht wie gewollt.. die funktion hat probleme mit meinem navi da ich das untermenü ein stück weit hochschiebe und somit das li verdecke mit dem das untermenü erscheint(wegen grafischen elementen kann ich das nur so machen..) aber.. nicht so schlimm.. hab jetzt eine klasse eingebunden http://berndmatzner.de/jquery/hoveraccordion/ funktioniert bestens... trotzdem danke anbei nochmal ein stück code mit dem ich ein div ein bzw ausblende.. was meint ihr dazu? (funktioniert bis auf das "inhalt" während der anim verschoben wird und die animation bei schnellem klicken immer komplett abläuft anstatt ab dem punkt wo die letzt anim gestoppt wurde.. such gerade wie man das noch lösen kann ) PHP-Code: <script type="text/javascript" src="/classes/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#ext").css({"display":"block"}); $("#ext_div").css({"display":"none"}); $("#ext").toggle(function() { $("#ext_div").stop(true,true); $("#ext_div").show("slow"); $(this).text("ausblenden"); }, function() { $("#ext_div").stop(true,true); $("#ext_div").hide("slow"); $(this).text("einblenden"); }); }); </script> </head> <body> <a href="#" id="ext" style="display:none;outline:none;">div</a> <div id="ext_div" style="display:block;width:200px;height:200px;background-color:rgb(200,200,200);margin:50px 0 0;"> <p>inhalt</p> </div>