Question

My .shake() effect is giving me the business across multiple browsers. For instance, in Chrome, if I hover quickly, I get a queue buildup problem. If I try implementing .stop() before my shake effect, the element will begin its downward shake and then just hang there without the animation completing and with the element completely out of place.
In IE, the animation fires more than once (even if I haven’t hovered quickly in and out). And annoyingly, if I keep the mouse on the link, it will fire the animation over and over and over.

I’ve tried playing around with .stop() and different variations of its true/false arguments. I’ve also tried using queue:false on each step of the animation. I even tried putting the .shake effect with times:0 on the mouseleave portion of the function (with hilarious results). At a loss as to what to try next.

My code is below, but here is a link to the menu with the shake problem.

$(document).ready(function () {
    $('.shake').hover(function () {
        $(this).animate({
            'color': '#fc0'
        }, 150).effect('shake', {
            times: 1,
            distance: 12,
            direction: 'down'
        }, 50);
    }, function () {
        $(this).animate({
            'color': '#8a600f'
        }, 500);
    });

Answer 1

My first thought was to add .stop(true,true) just before each .animate(), but you said you’ve tried that.

You can test whether the element is currently animated and only queue a new animation if needed:

$('.shake').hover(function() {
    var $this = $(this);
    if (!$this.is(":animated")) {
       $this.animate({
            'color': '#fc0'
       },150).effect(
            'shake', {
            times:1,
            distance:12,
            direction: 'down'
       }, 50 );
    }
}, function () {
    $(this).animate({
       'color': '#8a600f'
    },500); 
});

See the :animated selector doco for more info.