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>