I'm currently tackling a project involving a push menu. When the content div slides over, the menu buttons come in with a slight animation as they appear on the screen. However, if the user rapidly opens and closes the menu multiple times, the items on the list start disappearing and reappearing in an incorrect order. This issue seems to be caused by new animation calls overriding old ones and disrupting the sequence of events.
My ideal scenario would be for the animations to always function correctly (i.e., when the menu is opening, clear all previous animations and play the opening animation exclusively).
If that's not feasible, I'd settle for ensuring that each element queues its animations appropriately so that the menu elements don't vanish randomly upon opening the menu.
Check out this fiddle demonstrating the problem:
http://jsfiddle.net/9t10zr6m/1/
The top div is transparent due to having a background image, and I felt it would aid in visualizing the menu issue if you could see what was happening under the top div.
Here is the applicable jQuery code:
$(document).ready(function() {
$(".expandable-content").on('click', function(){
$(this).children(".internal-content").slideToggle();
});
$(".menu-button").on('click', function(){
var position = $(".blue-box").css("left");
if( position == "0px") {
$(".blue-box").velocity({left: "250px"}, 500);
$('.side-nav-link').finish();
$('.side-nav-link').velocity('transition.slideUpIn', { stagger: 50 });
} else {
$(".blue-box").velocity({left: "0px"}, 500);
$('.side-nav-link').finish();
$('.side-nav-link').velocity('transition.slideDownOut', { stagger: 50 });
}
});
});
And here is the pertinent HTML:
<div class="blue-box">
<h1>Julian Ptak</h1>
<h2>Kempis Coder. Simplicity. Purity.</h2>
<div class="menu-button"><img class="button-icon" src="img/menu-icon.png"><p class="button-text">Menu</p></div>
</div>
<div class="red-box">
<ul class="side-nav">
<li class="side-nav-link"><a href="">Home</a></li>
<li class="side-nav-link"><a href="">Work</a></li>
<li class="side-nav-link"><a href="">Hobbies</a></li>
<li class="side-nav-link"><a href="">Writings</a></li>
<li class="side-nav-link"><a href="">Code</a></li>
<li class="side-nav-link"><a href="">Contact</a></li>
</ul>
</div>
How can one make jQuery queue animations? Or ensure that only the correct animation plays based on the click, ignoring all previous ones?
I attempted using .finish() and .stop(), but neither resolved my issue. Any suggestions? Do those methods not work with velocity.js?