Question

I am trying to animate an element when the cursor enters its parent element and reverse that animation reliably when the mouse exits the element – for multiple levels of nested elements. I can do it clunkily with CSS (transitions not an option) but want to use jQuery to sexy it up 😉

An example of what I’m trying to achieve is this type of accordion menu but, as I say, with jQuery.

So far I have tried using mouseenter and mouseleave for the same example but can’t seem to get it to work after the first expand and contract.

How can I reliably and elegantly bind this hide/show animation to a mouseenter/mouseleave or something similar in jQuery?

Answer 1

It seems work

http://jsfiddle.net/sechou/Rce8A/2/

$(function(){
  //bind event
  $("li.level1").mouseenter(   
    function(){
       // make sure the item would diplay
       $(this).find("ul:first").find("li.level2").show(); 
       // do "show" 
       $(this).find("ul:first").show(500);       
    });

  $("li.level1").mouseleave(
      function() {
        // do "hide" 
        $(this).find(":parent").hide(500);
      }
  );
});