Порядок выполнения анимации

[Tohin]

Извиняюсь заранее, вопрос вероятно из области RTFM....Но что то я в ступор впал и ничего найти/понять не могу:
Итак есть n-разных элементов (допустим div'ы)
Я никак не могу решить 2 задачи:
1. как сделать чтобы анимация элемента n+1 начиналась только после окончания анимации элемента n? Можно конечно и так:

$('div.n').animate({"top": "+=350"},2500);
$('div.n+1').pause(2500).animate({"bottom": "+=110"},1500);

Но как то коряво на мой ламерский взгляд.....

2. При обработке событий, ну допустим:

$('div.n').hover(
		function() {
			$(this).find('div:first').slideDown('slow');
		},
		function() {
			$(this).find('div:first').slideUp('fast');
		});

можно насоздавать событий пока идет анимация (мышка, она ведь быстрая) и потом дочерний элемент пляшет сам по себе, пока не отработает все события.
Как запретить на время анимации постановку в очередь?

[Riim]

$('div.n').animate({"top": "+=350"},2500).animate({"bottom": "+=110"},1500);

Как запретить на время анимации постановку в очередь?

Лучше не запрещать постановку в очередь, а прерывать предыдущую анимацию.

[Tohin]

$('div.n').animate({"top": "+=350"},2500).animate({"bottom": "+=110"},1500);

Не... не то... див не один... дива два (div.n и div.n+1), и нужно запихнуть их анимацию в одну и ту же очередь.

Я тормоз! ответ в теме на первой странице Порядок выполнения команд
По идее должно быть так:

$('div.n').fadeIn(1500).fadeOut(1500,function() {
		$('div.n+1').fadeIn(1500); 
	});

ну или то же самое с animate

Лучше не запрещать постановку в очередь, а прерывать предыдущую анимацию.

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

Как и думал я не первый стакиваюсь с этим траблом
На этом форуме нашел код:

var hideDelayTimer = null;
    var flag = 0;
    $("#blablabla").bind("mouseenter",function() {
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
        if (flag == 0) {
            flag = 1;
            $(this).animate({"width": "+=120px"}, "slow");
        } else {
            return;
        };
    }).bind("mouseleave",function(){
        if (hideDelayTimer) clearTimeout(hideDelayTimer);
        hideDelayTimer = setTimeout(function() {
        hideDelayTimer = null; 
        if (flag == 1) { 
            $("#blablabla").animate({"width": "-=120px"}, "slow", function() {
                flag = 0;
             });
        } else {
            return;
        };
        }, 500);
    });

Как я понял, перед выполнением анимации задается переменная flag, а после ее окончания она обнуляется. Перед началом анимации проверяется состояние переменной и в сучае выпонения иной анимации новая не выполняется.
Не понял назначение переменной hideDelayTimer и проводимых с ней операций. Подскажите?

[Tohin]

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

При скрытии функция setTimeout(function() задает паузу перед выполнением анимации в 500мс. и если в этот период снова происходит вызов по событию, то анимация отменяется строчкой:
if (hideDelayTimer) clearTimeout(hideDelayTimer);