mouseenter and mouseout more stable results?

Question

So I wanted to have a cool feature, where the header of a focused content area changes using the nifty color animate tool. Well, it animates just fine... but it thinks you immediate mouseout when the mouse is still inside the target around. Does anyone know how to make it stable? I was thinking about capturing the mouse and if it's inside the 'zone' do it but I don't know if that is better?

        // Content Hovers

        $('.large-box > *').each(function(){

            $(this).mouseenter(function(){
                $(this).find('.column-header').animate({ 'backgroundColor': '#3e84d2' }, 'slow');
            });
            $(this).mouseout(function(){
                $(this).find('.column-header').animate({ 'backgroundColor': '#455c79' }, 'slow');
            });

        });

Soution: The solution was to use mouseleave() instead of mouseout()

Answer 1

Use mouseleave() instead of mouseout(), because mouseout() will trigger for sub-elements too and should be used with mouseover() instead of mouseenter().

Examples: http://api.jquery.com/mouseenter/