Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
jquery hover feedback fix
<div class="box"></div>
When hovering over this simple box div, the class "big" will be added to the box.
It will be animated over 300ms with a easeInOutQuint easing function. The problem
occurs when you quickly mouse in and out of the element. It will continue to build up
animations in a queue. To stop the queue, we must pass a complete callback that will
fire after a single animation has been run. When it finally does end, the existing queue
of animations on the element will be stopped, and the last animation will play one last time,
as a final animation. Passing false as the first argument will keep the animation queue available
so the last animation can run. If we passed true, it would clear the queue and we would be unable
to play the final animation, resulting in a glitch with the hover effect.
$('.box').hover(function () {
$(this).toggleClass('big', 300, 'easeInOutQuint', function () {
// stops the current animation queue - doesn't clear it, but jumps to play the last animation
$(this).stop(false, true);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment