Ожидание выполнения всей анимации в функции

[ravisen]

Добрый день!

Дано: есть функция equilibrate, которая выполняет ряд анимации и перемещений объектов.
Есть другая функция, которая вызывает equilibrate несколько раз.

Нужно: чтобы анимация в 1-ом вызове закончила выполняться до того как начнет выполняться анимация во 2-м вызове. Иначе каша получается на экране. Правда потом все на места встает. Но красиво не получается.

Помогите советом.

думал delay применить, но функция equilibrate по сути является циклом по элементам. Не знаю куда задержку прикрутить.

С таймером тоже не очень понятно что делать.

[Sweet]

Складывай анимации в массив (.push), а когда текущая анимация завершается, доставай (.shift) следующую.

[ravisen]

Если можно дайте пожалуйста пример как сложить и достать подобные эффекты в массив:

img.animate({width: big["width"], height: big["height"]}, 1500);

a.animate({width: big["width"], height: big["height2"], paddingTop: '0px'}, 1500);

showtext(a.attr('id').substr(5)); // функция текст показывает


и еще с 10 подобных анимаций.

все они, как я понял, надо в один элемент / подмассив запухнуть ?

[Sweet]

Может как-то так:

var stack = [];
//img.animate({width: big["width"], height: big["height"]}, 1500);
stack.push({
  type: "animate",
  context: img,
  arguments: [{width: big["width"], height: big["height"]}, 1500]
});
//a.animate({width: big["width"], height: big["height2"], paddingTop: '0px'}, 1500);
stack.push({
  type: "animate",
  context: a,
  arguments: [{width: big["width"], height: big["height2"], paddingTop: '0px'}, 1500]
});
//showtext(a.attr('id').substr(5));
stack.push({
  type: "showtext",
  arguments: [a.attr('id').substr(5)]
});
// а потом тип так:
var item = stack.shift();
if(item.type === "animate")
  item.context.animate.apply(item.context, item.arguments);
// ну или тип того:)

[ravisen]

Спасибо за ответ.

Но видимо так не получится.
За один прогон надо одновременно менять стили элементов, делать анимацию для ряда элементов другого цикла, каждый из которых не имеет вне цикла четкого идентификатора.
Может я не прав ?

Для наглядности привожу полный код 2-х функций

function equilibrate() {
	$('#slider ul li').each(function(i) {
		d = Math.abs(actual - i);
		var a = $(this);
		var img = a.children('a').children('img');
		switch(d) {
			case 0:
				img.animate({width: big["width"], height: big["height"]}, 1500);
				a.animate({width: big["width"], height: big["height2"], paddingTop: '0px'}, 1500);
				showtext(a.attr('id').substr(5));
			break;
			case 1:
				ttl.css({'font-size': font["small"]+'px'});
				if (slider[i] == 1) {
					slider[i] = 0;
					a.css({display: 'inline', width: '0px', height: '0px'});
					img.css({width: '0px', height: '0px'});
				}
				img.animate({width: small["width"], height: small["height"]}, 1500);
				a.animate({width: small["width"], height: small["height2"],  paddingTop: '100px'}, 1500);
			break;
			default:
				if (slider[i] != 1) {
					slider[i] = 1;
					a.animate({width: "0px", height: "0px", paddingTop: '100px'});
					a.hide('fast');
				}
			break;
		}
	});

	directlink();
}

function to_position(position) {
	delta = position - actual;
	if (delta > 0) znak = 1;
	else znak =-1;
	delta = Math.abs(delta);
	for (var i = 1; i <= delta; i++) {
		if (actual_change(znak)) {
			equilibrate();
		}
		$('.cat-item-selected').removeClass('cat-item-selected');
		$('#cat-links #nav'+position).addClass('cat-item-selected');
	}
	return false;
}

[ravisen]

Все. Разобрался сам.

Спасибо Sweet