стоп в анимации
 

Не могу понять,как это работает и зачем вообще нужен stop.
Увеличение,затем уменьшение картинки при hover.
При наведение на картинку ,начинается увеличение, при уходе с картинке уменьшение.
При многократном наведении,до завершения анимации,картинка начинает вести себя...либо уменьшается до минимума, либо увеличивается до бесконечности.Как с этим бороться?
Понятное дело ,можно жестко задать размеры и затем их контролировать,ну зачем тогда нужен stop().
Логически я то понимаю, что идет увеличение в 2 раза,я убираю мышь,начинается уменьшение но не с максимума, а стой величины, которой достигла картинка до снятия мыши,следовательно размер при завершении анимации будет меньше первоначального.Это все понятно, вот как решается этот вопрос, в инете ничего не нарыл, по этому поводу.Собственно сам код:

$(document).ready(function(){


$('.im').hover(function(){
        
       
        $(this).stop().animate(
    {
        width:$(this).width()*2,
        height:$(this).height()*2, 
        
        
    },2000)
    
    
    },function(){
    
    $(this).stop().animate(
    {
        width:$(this).width()/2,
        height:$(this).height()/2,
       
        
    },2000)
    
    
    });

если же stop(true,true); тогда никаких казусов,но при уходе мыши скачок до тех размеров,которые должны быть, можно ли ,как то другими методами решить?

сравните, со stop и без (поводите мышкой)

<style>img {position: absolute;} img + img {left: 150px}</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {

	$('img:first').hover(function () {
		$(this).animate({height:100}, 2000);
	}, function () {
		$(this).animate({height:50}, 2000);
	}); 
	
	$('img:last').hover(function () {
		$(this).stop().animate({height:100}, 2000);
	}, function () {
		$(this).stop().animate({height:50}, 2000);
	}); 	
	
});  
</script>
<img src=http://placehold.it/50> <img src=http://placehold.it/50>

Спасибо,уяснил