jquery - jquery hide/show causing mouseleave event

Question

I inserted a hover effect into my site, basically "click this link >" will transform to "click this link >" with a different color.

Because i use cufon, i'm doing this with two seperate divs, i first show the new one and then hide the old one and run the animation.

This works great, when the mouse enters from the top, left and right, but when the mouse enters from the bottom there's a flicker and the mouseleave event is triggered.

My guess is that the hide is done before the show and that the container div becomes empty for a short period of time.

Any ideas how to prevent the mouseleave?

my php function for such links is this:

function link_arrowed($label,$font_size,$margin_to_arrow,$extended_margin,$inactive_color,$active_color){


    $html = "           <div class='arrowed_link' style='min-height:".$font_size.";'>
                             <input value='".$extended_margin."' class='extended_margin' type='text' style='display:none' hidden>

                            <div class='inactive_text' style='float:left;'>
                                <div style='float:left;margin-right:".$margin_to_arrow.";font-size:".$font_size.";color:".$inactive_color.";'>".$label."</div>
                                <div class='arrow_right' style='float:left;font-size:".$font_size.";color:".$inactive_color.";'>></div>
                            </div>

                            <div class='active_text' style='float:left;display:none;'>
                                <div style='float:left;margin-right:".$margin_to_arrow.";font-size:".$font_size.";color:".$active_color.";'>".$label."</div>
                                <div class='arrow_right' style='float:left;font-size:".$font_size.";color:".$active_color.";'>></div>
                            </div>
                        </div>
        ";

    return $html;

}

my js:

$(document).on('mouseenter','.arrowed_link', function(){

    var extended_margin = $(this).children('.extended_margin').val();

    $(this).children('.active_text').show();
    $(this).children('.inactive_text').hide();

    $(this).children('.active_text').children('.arrow_right').animate(
        {'margin-left': extended_margin}, 
        200, function(){
    });

});

$(document).on('mouseleave','.arrowed_link', function(){

    $(this).children('.active_text').children('.arrow_right').animate(
       {'margin-left': '0px'}, 
       200,
       function(){
           $(this).parent().siblings('.inactive_text').show();
           $(this).parent().hide();  
   }); 


});