Как изменить направление анимации javascript при любой её «фазе»?

Question

[Hause]

Я новичок в javascript и не совсем понимаю в чём проблема. Хотелось что бы при повторном клике на элементе, находящемся в фазе анимации, изменялось направление его анимации. Т.е. к примеру элемент увеличивался в высоту, а после клика на него во время этой анимации он уменьшался в высоту. Всё работает нормально если клик производятся уже после анимации. Спасибо за понимание, жду ваших ответов.
Вот исходный код:

function animate (object) {	
var start = new Date;
var timer;
var progress;
var arg;
clearInterval(timer);
timer = setInterval(function () {
	if (!progress) progress = 0;
	progress += (new Date - start) / 2000;
	if (object.height <= "50px") {	
	arg = progress;
	} 
	else {	
	arg = 1-progress;	
	}
	if (arg > 1) arg = 1;
	if (arg < 0) arg = 0;
    object.step(arg);
    if (arg === 1||arg === 0) {	
	clearInterval(timer);
	}	
}, 20);
}

if(document.getElementsByClassName) {
	 
	    getElementsByClass = function(classList, node) {   
	        return (node || document).getElementsByClassName(classList)
	    }
	 
	} else {
	 
	    getElementsByClass = function(classList, node) {           
	        var node = node || document,
	        list = node.getElementsByTagName('*'),
	        length = list.length, 
	        classArray = classList.split(/\s+/),
	        classes = classArray.length,
	        result = [], i,j
	        for(i = 0; i < length; i++) {
	            for(j = 0; j < classes; j++)  {
	                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
	                    result.push(list[i])
	                    break
	                }
	            }
	        }
	     
	        return result
	    }
	}
var elem = getElementsByClass("showpanel");
for (var i = 0; i < elem.length; i++) {
elem[i].addEventListener("click", function(e) {
	return function(i) {
	animate({	
	height: elem[e].style.height,
	step: function (arg) {
		elem[e].style.height = 50 + arg*500 + "px";
	},
	})}}(i), false);
}

Answer 1

[Виталий Инчин ☢]

Не хочу разбирать этот огромный кусок кода, но на поверхности видно, что timer объявляется в области видимости animate, а следовательно, при ее вызове кусок

clearInterval(timer)
//На самом деле
clearInterval(undifined);

Вывод: Объявите timer вне функции animate.

Answer 2

[Hause]

Сделал как вы сказали, но анимация работает также: При нажатии на элемент, расширяющийся в любом направлении, он возвращается в начальное положение (progress=0), а затем расширяется до положения (progress = 1).

Не хочу разбирать этот огромный кусок кода

Я выложил весь код на всякий случай) А ключевую роль здесь играет функция animate.

Всё, я сумел разобраться.)) Но всё равно большое спасибо за помощь. Не буду описывать принцип его действия, но для тех, кому будет интересно как я решил эту проблему, я оставляю здесь свой код, хотя я не гарантирую что он идеален)):

var arr_timer=[];
var arr_progress=[];
var arr_id=[];
function animate (object) {	
var arg;
clearInterval(arr_timer[object.id]);
if (!arr_progress[object.id]) arr_progress[object.id] = 0;
if (!arr_id[object.id]) arr_id[object.id] = 0;
if (arr_progress[object.id] >= 1) arr_progress[object.id] = 0;
arr_id[object.id]++;
if(arr_id[object.id] > 1) arr_id[object.id]=0;
var start = new Date;	
arr_timer[object.id] = setInterval(function () {
	arr_progress[object.id] += (new Date - start) / 2000;
	if (arr_id[object.id] === 1) {	
	arg = arr_progress[object.id];
	} 
	else {	
	arg = 1-arr_progress[object.id];	
	}
	if (arg >= 1) arg = 1;
	if (arg <= 0) arg = 0;
    object.step(arg);
    if (arg === 1||arg === 0) {	
	clearInterval(arr_timer[object.id]);
	}	
}, 20);
}

if(document.getElementsByClassName) {
	 
	    getElementsByClass = function(classList, node) {   
	        return (node || document).getElementsByClassName(classList)
	    }
	 
	} else {
	 
	    getElementsByClass = function(classList, node) {           
	        var node = node || document,
	        list = node.getElementsByTagName('*'),
	        length = list.length, 
	        classArray = classList.split(/\s+/),
	        classes = classArray.length,
	        result = [], i,j
	        for(i = 0; i < length; i++) {
	            for(j = 0; j < classes; j++)  {
	                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
	                    result.push(list[i])
	                    break
	                }
	            }
	        }
	     
	        return result
	    }
	}
var elem = getElementsByClass("showpanel");
for (var i = 0; i < elem.length; i++) {
elem[i].addEventListener("click", function(e) {
	return function(i) {
	animate({	
	id: e,
	step: function (arg) {
		elem[e].style.height = 50 + arg*500 + "px";
	},
	})}}(i), false);
}

Comments

[Виталий Инчин ☢]

Значит интервал не отключается! Отследите вручную. Или дайте реальный пример на jsFiddle.

[Hause]

Если я правильно вас понял то вот пример на jsFiddle jsfiddle.net/rqqf9jnp