I have recently been working one project using several jQuery animations. While I had already mastered using callback functions to make sure the animation completed and using stop to prevent that nasty continuous animation effect, I negelected to consider what happens when more than one user interaction triggers the animation. The result was an animation mess! The solution, of course, is to check if the item is already being animated and use a time out interval to make sure all animations are complete.

Here is an example from some jQuery code:

this.bind('mouseenter', function() {
var wait = setInterval(function() {
if( inAnimation == false)  {
clearInterval(wait);
var infolink = Galleria.get(0).$("info-link,image-nav-left,image-nav-right,playpause");
var navpause = Galleria.get(0).$("image-nav-left,image-nav-right,playpause");
var orangebars = Galleria.get(0).$("stageleft, stageright");
if (options.showInfo === true) {
if (!Galleria.get(0).$("info-text").is(":visible") )
{
Galleria.get(0).$('playpause').show();
orangebars.stop(true, true).animate({"width": "toggle"}, 500, 'swing', function() {
stageidle.css({'width':'', 'overflow': ''});
stageleftidle.css({'width':'', 'overflow': ''});
infolink.show();
});
}
else {
stageidle.stop(true,true).animate({"width": "toggle"}, 500, 'swing', function() {
navpause.show();
stageidle.css({'width':'', 'overflow': ''});
});

}

}
else { 

stageidle.show();
navpause.show();
}
}}, 200);
});