JQuery .hover() уход с элемента во время его анимации
 

Приветствую!
заметил странную вещь,
есть картинка,
которая появляется и потом увеличивается при наведении на ее уменьшенную копию,
при уходе с картинки поставлен обработчик, уменьшающий ее обратно.

Так вот, если быстро провести над картинкой, то она увеличится, но обратно не уменьшится, т.к. анимация еще не закончена.

вот код :

/* УВЕЛИЧЕНИЕ КАРТИНКИ ПРИ НАВЕДЕНИИ */
	$('.miss_right img.min').hover(function() {
		
		$('.miss_right img.big:visible').stop(true).css('display', 'none');
		
		var center = {};
		center.left = $(this).offset().left + $(this).width()/2;
		center.top  = $(this).offset().top  - $(this).height()/2;
		
		$(this).next('.big').css('position', 'absolute');
		$(this).next('.big').css('left', '' + $(this).position().left + 'px');
		$(this).next('.big').css('top',  '' + $(this).position().top  + 'px');
		
		$(this).next('.big').css('display', 'block');
		$(this).next('.big').animate({'width' : '70px'});
	},
	function() {
	});
	
	
	
	$('.miss_right img.big').hover(function() {
	},
	function() {
		$(this).stop(true).animate({'width': '54px'}, function() {
			$(this).css('display', 'none');
		})
	});

Кто с этим сталкивался, подскажите решение проблемы, пожалуйста..

Дело не в том, что анимация не закончена, а в том, что курсор на большую картинку не попадает и, соответственно, с нее не уходит. Допишите для контейнера .miss_right обработчик:

$('.miss_right').mouseleave(function() {
  $(this).find('.big').stop(true).animate({'width': '54px'}, function() {
   $(this).css('display', 'none');
  })
 });

только он должен быть линейным, а не блочным.