I am experiencing an issue with my menu animation. I am curious as to why the slideDown transition is occurring twice. You can view the JSFiddle here.
<ul class=top-menu">
<li>Item 1</li>
<li>Item 2</li>
<ul class="sub-menu">
<li>Sub Item 1</li>
....
</ul>
</li>
</ul>
When hovering on the black vertical menu bar, it is supposed to slide out, revealing a sub menu that slides down.
I have written the following code to ensure that the menu first opens to the right, followed by the slide down animation for any selected sub menu.
$('#page-wrapper').one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
e.preventDefault();
$('.active ul:first').slideDown('normal');
});
Could someone please explain why the slideDown function is being executed twice?
Any suggestions would be greatly appreciated.