[jQuery] fadeIn/Out problem

[krcko]

Hi to all, i'm having problems with fade in/out animation. I have
buttons and i want to make hover fade-in effect.

this is html:

<div class="button">
        <div class="button-base"></div>
        <div class="button-hover"></div>
        <a href="#">Top rated</a>
</div>

<div class="button">
        <div class="button-base"></div>
        <div class="button-hover"></div>
        <a href="#">Groups</a>
</div>

at the beginning button-hover is hidden, and i want to make it fade-in
when button is hovered, this is script i use:

$(function()
{
        $('.button').each(function()
        {
                $(this).hover
                (
                        function()
                        {
                                $('.button-hover', this).fadeIn('fast');
                        },

                        function()
                        {
                                $('.button-hover', this).fadeOut('normal');
                        }
                );
        });
});

and it works ok, but when i move mouse hover and out the button i.e.
15 times the script will 'remember' that and it will flash button 15
times! i don't want this.

i've tried to add flag to each button $('.button').attr('animating',
'no') and to check it before doing any animations, if the flag state
is "yes" i return, if not i do animation, and i was setting this flag
before fadeIn and fadeOut and reseting it in callback function for
each animation... but it doesn't works...

i've tried with .stop() function but had no luck either...