hover in jQuery increment fontSize error

Question

ok, I'm fooling around with jQuery and for the life of me can't find an elegant way to fix this error.

jQuery('a').hover(function()
{
    jQuery(this).animate({fontSize : '+=5'});
}, function()
{
    jQuery(this).animate({fontSize : '-=5'});
});

The problem with that is that I build up an animation que. I thought i could solve it with stop() like this:

jQuery('a').hover(function()
{
    jQuery(this).stop().animate({fontSize : '+=5'});
}, function()
{
    jQuery(this).stop().animate({fontSize : '-=5'});
});

But if you mouse over it and unmouse over it you lose a full 5px even though it didn't yet add 5 yet. Is there a way to reset the pixel size something like .css(fontSize, "") or computedStyle or something like that?

Answer 1

you're almost there. you just need to use .stop(true,true).

crazy demo

_{Welcome to stackoverflow.com}