mouseover/out issue

[turpentyne]

I've added in a .filter to get rid of queued up mouseovers on an div, but now, if the user mouses out quickly enough, the image continues to get +10 larger without ever shrinking back down, like the mouseout says to. The problem is that there's a separate animation that makes the images a different size, so I'm trying to do this with a relative size with +=, -= and not set pixels.

any thoughts?

$(".square.one,#link_nest").mouseenter(function(){
 
	if ($(".the-nest")[0]){
		$("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
		}
	else{
	
		$(".square.one").filter(':not(:animated)').animate({width:"+=10px"},200);
		$("#link_nest").css({color:"#153d53",fontWeight:"400"},100);
		$("#square_caption1").css('visibility','visible');
	} 
 });
  
  
 $(".square.one,#link_nest").mouseleave(function(){
	if ($(".the-nest")[0]){
		$("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
	}
	else{
    	$(".square.one").filter(':not(:animated)').animate({width:"-=10px"},200);
    	
    	$("#link_nest").css({color:"black",fontFamily: "Source Sans Pro",fontWeight:"300"},100);
    	$("#square_caption1").css('visibility','hidden');
    }

 });

[bolo77]

could something like below work?

 $('#'+ divID).mouseenter(function(){
        
        $(".square.one").filter(':not(:animated)').animate({width:"+=10px"},200);
        //do something
    }).mouseleave(function(){
    	$(".square.one").stop(true) //removes animation in the queue
    	$(".square.one").filter(':not(:animated)').animate({width:"-=10px"},200);

           // do something
        });

[turpentyne]

The image still gets bigger if I mouse-off quick enough to not register that I moused off of the image?


I put in an alert test, and it does seem to register that I moused off, no matter how fast. But the animation doesn't seem to trigger - unless I go slow.