Как пропорционально уменьшить .animate() прямоугольный блок?

Question

[Роман Савицкий]

Имеется резиновый блок

width: 100%;
height: 100%;

Далее анимирую его до

$(window).scroll(function(){
	    maxTop = 2050;
		var top = $(this).scrollTop();
        }
		if (top >= maxTop) {
		   $('.study_part_main').animate({'width': '14%', 'height': '55%'}, 700);
		}
	});

Но он сначала уменьшается по длине, затем по высоте, а хочу добиться чтобы одновременно уменьшалась и длинна и высота, что подскажете ? Спасибо.

Answer 1

[Александр Вульф]

Хм, все вместе двигается: https://jsfiddle.net/ez9fetrt/

Answer 2

[Алексей]

У меня уменьшается синхронно по обоим сторонам - https://jsfiddle.net/bp2067z2/
UPD. Возможно вам нужно или unbind функцию на scroll или ввести проверку что анимация началась и повторно при скролле ее не пытаться запустить.

Comments

[Роман Савицкий]

Если не трудно, можете по подробней рассказать про unbind функцию на scroll, или что анимация началась, как это применить ?

[Алексей]

$(window).unbind('scroll');
Но в вашем случае, наверное, код сложнее, и надо что-то типа глобальной переменной block_animation_started=0; во время запуска внимации сделать block_animation_started = 1 и проверять кроме top >= maxTop еще и block_animation_started == 0.
Можно сделать красивее, через addClass (несуществующий класс) и проверку наличия этого класса.

[Роман Савицкий]

Алексей: сделал, тоже самое остается
spacedeer.com.ua/testanimation