Issue with Show/Hide on hover (or mouseover/mouseout)

Issue with Show/Hide on hover (or mouseover/mouseout)

Hi,

I have an issue with a show/hide effect on a menu (list based) triggered with a hover event.

Here is the part of the HTML :

  1. <div class="somm">
  2.     <ul>
  3.         <li><a href="#tech">2. Aspects techniques</a>
  4.             <ul>
  5.                 <li><a href="#gmapi">2.3. L'API JavaScript Google Maps</a>
  6.                     <ul>
  7.                         <li><a href="#gmapipres">Présentation et «&nbsp;initialisation&nbsp;»</a></li>
  8.                         <li class="parent"><a href="#gmapiprem">Premiers pas</a>
  9.                             <ul>
  10.                                 <li><a href="#gmapiprem1">Carte &amp; marqueur</a></li>
  11.                                 <li><a href="#gmapiprem2">Afficher une infobulle</a></li>
  12.                                 <li><a href="#gmapiprem3">Fonction pour créer les marqueurs</a></li>
  13.                             </ul>
  14.                         </li>
  15.                         <li class="parent"><a href="#gmapimark">Manipulation avancée des marqueurs</a>
  16.                             <ul>
  17.                                 <li><a href="#gmapimark1">Marqueurs et icones</a></li>
  18.                                 <li><a href="#gmapimark2">Marqueurs déplaçables</a></li>
  19.                                 <li><a href="#gmapimark3">GMarkerManager</a></li>
  20.                             </ul>
  21.                        </li>
  22.                         <li class="parent"><a href="#gmapipoly"><em>Polygons</em> &amp; <em>Polylines</em></a>
  23.                             <ul>
  24.                                 <li><a href="#gmapipoly1">GPolyline &amp; GPolygon Overlay Classes</a></li>
  25.                                 <li><a href="#gmapipoly2">Fichiers KML</a></li>
  26.                                 <li><a href="#gmapipoly3">Encoded polylines and polygons</a></li>
  27.                             </ul></li>
  28.                     </ul></li>
  29.             </ul></li>
  30.     </ul>
  31. </div>

Here is the code with a hover event :

  1. jQuery(document).ready(function(){
  2.     jQuery(".parent ul").hide();
  3.     jQuery(".parent").hover(function () {
  4.         jQuery(this).children("ul").toggle("slow");
  5.     });
  6. });

 You can test it here : http://jsfiddle.net/wHbah/

The effet is produced when you hover one of the three last items of the list.

As you can see there is a problem when there are multiple and repetitive hover.


I tried to use another code, based on mouseover and mouseout events :
  1. jQuery(document).ready(function(){
  2.     jQuery(".parent ul").hide();
  3.     jQuery(".parent").mouseover(function () {
  4.         jQuery(this).children("ul").show("slow");
  5.     });
  6.     jQuery(".parent").mouseout(function () {
  7.         jQuery(this).children("ul").hide("hide");
  8.     });
  9. });

See it in action : http://jsfiddle.net/wHbah/1/

But it's even worth that my first attempt :/


If I try to remove the duration in both that examples, the issue doesn't show as you can see there :
- with the toggle effect : http://jsfiddle.net/wHbah/2/
- with the hide/show effect : http://jsfiddle.net/wHbah/3/

Someone on the irc channel gives me a tip, using the .stop().toggle() but it doesn't solve the issue (make it worse in fact), as you can see there : http://jsfiddle.net/gD742/3/

It seems that using stop(true,true) instead of stop() makes it better : http://jsfiddle.net/wHbah/4/ but there is still a little latency when you don't wait until the sub-menu is entirely shown.

Finally, someone else on the irc channel, gave me that piece of code :

  1. jQuery(this).children("ul").each( function (index) { jQuery(this).hide(); // more code here to animate the correct ul} );
but I don't really understand what to do whith that.


Thanks you for having read me (sorry for my english) and thanks in advance for your help.

See you