Here is a snippet of code that moves a heading icon back and forth when you hover over the heading:
jQuery('h1.heading').hover(
function(){
$icon = jQuery('.heading-icon', this);
if( ! $icon.is(':animated') ){
$icon.animate({ "margin-left" : "+=7px" }, 200, function(){
$icon.animate({ "margin-left" : "-=7px" }, 400, function(){
$icon.css('margin-left','auto');
} );
} );
}
},
function(){}
);
However, there's a bug where if you hover over the heading too quickly, it ends up in the wrong position. I've tried using onComplete functions and checking if it's animated, but it still doesn't work as expected.
I thought about resetting the position after the animation ends so that even if it bugs out, it would at least go back to the original position. This solution only partially works and the issue persists.
Any ideas on what could be causing this? Why does the shake effect from jQuery UI work better?
Note: It's okay if the animation runs a few more times, the main goal is to have it stay in the right position once all animations are complete.
Can anyone offer some guidance? :)
EDIT
I was able to replicate the problem on JSFiddle - http://jsfiddle.net/yhJst/
==> try hovering up and down quickly over the headings
EDIT2
The issue doesn't seem to occur when there is only one heading... http://jsfiddle.net/scZcB/3/