вопрос по 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 — общий для обоих элементов родительский эл-т.
Т.о. мы делаем один обработчик на все элементы.

[kiff86]

Matre,
Что-то не пойму код..


$("#menu td:not(#add_cook)").each(function(){
$(this).parent().one("click",function(event){ // добавление
if(event.target == $(this)...){ // тут не понятно как сравнить элемент parent с тем на который кликнули...
$(this).one("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;}
var self = $("#content"), callee = arguments.callee;
self.animate({'height':$conH},$time,function(){
$("#text").show("drop",{direction: 'right'},400);
self.one("click", callee);
});
});
});
});
}
});
});



как-то так что ли?

[Matre]

тут не понятно как сравнить элемент parent с тем на который кликнули...

$(event.target).is("#id.myclass") // например

Что-то у Вас в коде много лишнего. Я сделал свой набросок:

$("#parent").one("click", function (event) {
var callee = arguments.callee;
if ($(event.target).is(".section")) {
$(event.target).animate({...}, 1000, function () {
$("#parent").one("click", callee);
});
}
});
});

#parent — общий "родитель" для всех обрабатываемых элементов
.section — сам элемент, кот. нужно обработать

[kiff86]

Спасибо огромное! Буду пробовать!
P.s. то есть метод each уже не нужен получается..

блин, тут получается, что анимате идет для элемента меню (так как на него кликают) .. а мне-то нужно так:
кликаем на пункт меню, начинает анимироваться другой элемент, и пока он до конца не дойдет блокировать другие пункты меню...

[Matre]

Ну так замените $(event.target) из 4-ой строчки на нужный Вам элемент.

[kiff86]

Matre,
только что попробовал.. чутка еще подправил код и - ура - все заработало! Огромное спасибо!