jquery sliding menu opening/closing animations issue <p>I'm testing this on local : <a href="http://jsfiddle.net/fYkMk/1/" rel="nofollow noreferrer">http://jsfiddle.net/fYkMk/1/</a> This is a booking form that opens up on mouse over (booking-mask) and closes when mouse leaves it. It has 4 fields : </p> <ul> <li>datepicker</li> <li>number of guests </li> <li>number rooms</li> <li>number of nights</li> </ul> <p>the last three fields are sliding menus that open up with a click on the relative icon.</p> <p>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.</p> <p>So it happens the lists are broken and I can only see a piece of them.[see image below]</p> <p><img src="https://i.stack.imgur.com/LxhK8.jpg" alt="enter image description here"></p> <p>Hope you can help me out with this. Thanks</p> <p>Luca</p>