css issue on mouseoff of animation

[turpentyne]

I have a div that resizes on mouseover/mouseoff. Everything works fine except a child div with text that will stay showing if the user mouses off too quickly... Is there a way to prevent this?

The div that's getting left on is "#square_caption1"
Here's what I've got for jquery:

$(".square.one,#link_nest").hover(function(){
    if (!$(".square.one").hasClass('animated') && !$(".square.one").hasClass('subbed')) {
        $(".square.one").dequeue().stop().animate({ width:"155px",height:"219px" },240);
        $("#link_nest").css({color:"#153d53",fontWeight:"400"},100);

        $('#square_caption1') .delay(450).queue( function(next){ 
            $(this).css('visibility','visible'); 
            next(); 
  });

            }
}, function() {
if (!$("#sq1").hasClass('subbed')) {
    $("#square_caption1").css('visibility','hidden');
    $(".square.one").addClass('animated').animate({ width:$width_one, height:$height_one }, "normal", "linear", function() {
        $("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
        $(this).removeClass('animated').dequeue();
    });
    };
});

And the html:

<div class="square one" id="sq1" style="overflow:hidden;">
    <div id="square_caption1" class="square_captions">
        The Nest
    </div>
    <div id="cf" style="overflow:hidden;height:100%;width:100%;">
        <img class="bottom" style="width:100%;" src="images/xresidences_1_color.jpg" id="pic_1">
        <img class="top" style="width:100%;" src="images/xresidences_1.jpg"  id="pic_1_color">
    </div>           
</div>

I have a div that resizes on mouseover/mouseoff. Everything works fine except a child div with text that will stay showing if the user mouses off too quickly... Is there a way to prevent this?

Do you have at least a image on how it looks like. It would be helpful in this situation.

I assume you got this code from here:

http://api.jquery.com/animate/