jquery sliding menu opening/closing animations issue

Question

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]

Hope you can help me out with this. Thanks

Luca

Answer 1

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

Answer 2

I can't really see those three buttons in your example, but try implenting .stop(true, true) in your code, and if animations collide, try setting up another animation qeue, I believe the default jQuery one is "fx". There are also .qeue() and .deqeue() functions that might help you, head over to the jQuery site and read the documentation, or wait and see if someone smarter then me figures it out.

If I understand this correctly, the dropdown menu dissapears behind the main site/background one point, and that actually looks a lot more like a css problem to me, probably something to do with overflow hidden.

.choose-list li{overflow: visible; z-index: 9999;}

.choose-list li:hover{
    background:#8B753B;
    color:white;
    overflow: visible;
}

Does this fix it ?

EDIT: using my laptop and windows with FF I see what your talking about ;-)

It seems to me the problem is .booking-mask going over to overflow hidden, could be the jQuery Toggle or something else you did in the css, but adding important fixes it for me in the fiddle, like this:

.booking-mask{
    background: red;
    height: 58px;
    margin: 44px 0 0;
    position: fixed;
    right:0;
    top: 0;
    z-index: 3;
    overflow:visible!important;
    /*padding:0;*/
    color:white;
}