Search code examples
jquerydrop-down-menusliding

jquery sliding menu opening/closing animations issue

I'm testing this on local : http://jsfiddle.net/fYkMk/1/ This is a booking form that opens up on mouse over (booking-mask) and closes when mouse leaves it. It has 4 fields :

  • datepicker
  • number of guests
  • number rooms
  • number of nights

the last three fields are sliding menus that open up with a click on the relative icon.

These sliding animations work until The user decide to "mouseover" then "mouseleave" and "mouseover" again over the booking-mask div before the oprning/closing animations are finished yet.

So it happens the lists are broken and I can only see a piece of them.[see image below]

enter image description here

Hope you can help me out with this. Thanks

Luca

Solution

  • jQuery animate sets the visibility to hiden, so u should reset it every where it looks like a problem. For example here:

     $('.booking-mask').mouseenter(function(){
                mouseOverBooking = true;
                $(this).css('overflow', 'visible');
                openBookingMask();
                });

    Just put 

    $(this).css('overflow', 'visible');

    in the right places to work more smoothly.

    updated fiddle