[jQuery] Keeping a mouseover-triggered animation from running

[Gordon]

I am working on a project that includes a group of items arranged in a
grid.  the powers that be would like for a mouseover event to make the
hovered item expand so that more information could be shown and shrink
again when the item is unhovered.

My first attempt simply did an animate () on the hovered item and
another one when it was unhovered.  this produced the desired scaling
effect, but it also ran into a few problems when the mouse was moved
over several items in quick succession.

I thought I could overcome the problem by creating a boolean var that
is toggled to true when the mouse first hovers over an item, and that
while the value is set true the animation won't happen for other
elements.  When the element is unhovered the shrink animation is
played with a callback that sets the value back to false when it
completes.

However, this didn't work quite as planned, the animation effect only
gets disabled the first, third, fifth, sevenths, etc time the mouse
hovers over the element.  Every other time the animation doesn't get
disabled and the mouse over peoblems I got with the original idea
still persist.

Here's my code

var expanded = false;

$('.foo').hover (function ()
{
        if (!expanded)
        {
                expanded = true;
                $(this).css ('zIndex', 100).animate ({
                        width   : 500,
                        height  : 250},
                        'normal');
        }
},
function ()
{
        $(this).animate ({
                width   : previousWidth,
                height  : previousHeight,
                zIndex  : 0},
                'normal',
                function () {expanded = false;});
});

Does anyone have any ideas on this?