Wait until jQuery accordion panel is collapsed until opening another

Question

I have the jQuery UI Accordion set up to open and close on mouseenter/mouseleave. The problem with this is that unfortunately the closing animation abruptly stops when switching to another panel quickly.

I don't want this to happen, but I want to keep the slide animation. Is there a way to not open the panel if another is still in the process of closing?

HTML:

<div id="navitems">
    <h3>Home</h3>
    <div>Home Panel</div>
    <h3>Contact</h3>
    <div>Contact Panel</div>
</div>

Javascript:

$("#navitems").accordion({
    active: false,
    collapsible: true,
    event: "mouseover mouseleave",
});

I did a fair amount of research on this and came up with nothing useful.

Answer 1

Could you just use the mouseover event?

$("#navitems").accordion({
    active: false,
    collapsible: true,
    event: "mouseover",
});

This seems to behave the way you are describing: Example