show/hide on mouseenter/mouseleave with children(".class") element

Question

I'm actually trying to show/hide a div in another div on a hover with jquery (1.8.3), with the jquery ui (1.9.2) "puff" effect. Here's my HTML :

<li id="category_1">
  <div class="item_menu">
     <img src="image.jpg"/>
     <div class="titre" style="display:none;">menu title</div>
  </div></li>
<li id="category_2">
  <div class="item_menu">
     <img src="image.jpg"/>
     <div class="titre" style="display:none;">menu title</div>
  </div></li>
  ...

and heres my js :

$(".item_menu").mouseenter(function(){
   $(this).children(".titre").show("puff");
}).mouseleave(function(){
   $(this).children(".titre").hide("puff");
});

The problem is that when the mouseout comes before the animation is over, the .titre div won't hide.

I tried many ways to handle it with stop(), animating with toggle() or use hover() instead of mouseenter/mouseleve and many other ways, and it always render the same. I tried once this :

$(".item_menu").mouseenter(function(){
   $(".titre").show("puff");
}).mouseleave(function(){
   $(".titre").hide("puff");
});

And to my surprise, it worked like a charm, but... as it is an item of a menu pointed by its class, of course it shows/hides every items instead of the one who is hovered... So, i think it's a problem with the $(this).children stuff... If i don't use the jquery ui "puff" effect (as any other jquery ui effect), it also works... but i'm requested to use this specific effect. So i think my problem comes from the combination of $(this).children and the use of a jquery ui effect.

As this menu is generated dynamically i cannot really point items with id and retrieve them easily...

Fiddle : http://jsfiddle.net/EECW8/6/

I don't see anything that would animate. What's causing the animation? — Explosion Pills
show("puff") and hide("puff") animate the show/hide with the jquery ui "puff" effect. Thanks Mooseman, Fiddle updated to match the way I display it : jsfiddle.net/EECW8/6 — Laurent Bosc

ragsonWeb ragsonWeb · Accepted Answer · 2013-01-24T00:35:47

try using .hover : hover documentation http://api.jquery.com/hover

something like this :

$("#divToBeHoveredOn").hover(
           function()
           { 
                 // content to show
           },
           function() 
           { 
         //content to hide }
        );

show/hide on mouseenter/mouseleave with children(".class") element

1 Answers