вопрос по animate

[Nightmare]

как не проигрывать снова анимацию пока не закончилась предыдущая?

[walik]

$('#bla1').animate({opacity: 0.25}, 'slow', function() {
    $('#bla2').animate({opacity: 0.25}, 'slow');
});

[Nightmare]

разьясню:

$('.s').click(function() {
   $('.sDIV').animate('margin-left':'-=20px', 500)
})

если много раз щелкаешь - еще некоторое колл-во секунд двигается влево... как предотвратить?

[B@rmaley.e><e]

$('.s').click(function() {
   $('.sDIV').not(':animated').animate('margin-left':'-=20px', 500)
})

[kiff86]

Похожий вопрос, поэтому не создаю тему..
Есть меню.. при нажатии на любой пункт меню идет подгрузка заданного контента методом load.. перед этим идет анимация по увеличению высоты блока в который загружается контент.
Но, если нажать на один пункт, и, не дождавшись анимации и показа загруженного изображения, нажать на другой элемент меню, то происходит неразбериха в анимации... Вот бы была функция, которая блокирует определенный яваскрипт, до полного окончания действия...

[kiff86]

вот, кста. код:

$("#menu td:not(#add_cook)").each(function(){
        $(this).click(function(){
            $("#menu td:not(#add_cook)").not($(this)).css('backgroundColor','');
            $(this).css('backgroundColor','#740D13');
            $id = $(this).attr('id');
            $("#text").hide("drop",{direction: 'left'},600,function(){
                $(this).load("php/"+$id+".php",function(){
                    $(this).width(760);
                    $conH = $(this).height();
                    if($("#content").height() == $conH){$time = 0;}
                    else{$time = 1000;}
                    $("#content").animate({'height':$conH},$time,function(){
                        $("#text").show("drop",{direction: 'right'},400);
                    });
                });
            });
        });
    });

Может сделать проверку при клике? Как сделать проверку, анимируется или сейчас $("#text") или нет?

[Matre]

Я для этого придумывал небольшой паттерн:

$(element).one("click", function () {
	var self = $(this), callee = arguments.callee;
	self.animate({ ... }, 1000, function () {
		self.one("click", callee);
	});
});

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

[kiff86]

Matre,
все бы хорошо, если бы у меня была одна кнопочка(пункт меню).. в таком варианте, функция не будет "дублироваться сама собой", но если есть два элемента? Получается анимация будет выполняться, и если я нажму на пункт меню, который только что нажал, то все ок, но если я нажму на следующий пункт меню при незавершенной анимации.. опять дабл..

[kiff86]

может в начале как-то остановить анимацию если она присутствует... но как???
или проверять если идет анимация - то ждать ее завершения..

[Matre]

Для этого есть ещё один паттерн:

$(parent).one("click", function (event) {
	// делаем проверку, является ли event.target элементом, клик на который нужно обработать
	// делаем действия, которые я привёл в первом примере, только .one() вешаем уже на parent
});

parent — общий для обоих элементов родительский эл-т.
Т.о. мы делаем один обработчик на все элементы.