вопрос по animate
как не проигрывать снова анимацию пока не закончилась предыдущая?
|
$('#bla1').animate({opacity: 0.25}, 'slow', function() {
$('#bla2').animate({opacity: 0.25}, 'slow');
});
|
разьясню:
$('.s').click(function() {
$('.sDIV').animate('margin-left':'-=20px', 500)
})
если много раз щелкаешь - еще некоторое колл-во секунд двигается влево... как предотвратить? |
$('.s').click(function() {
$('.sDIV').not(':animated').animate('margin-left':'-=20px', 500)
})
|
Похожий вопрос, поэтому не создаю тему..
Есть меню.. при нажатии на любой пункт меню идет подгрузка заданного контента методом load.. перед этим идет анимация по увеличению высоты блока в который загружается контент. Но, если нажать на один пункт, и, не дождавшись анимации и показа загруженного изображения, нажать на другой элемент меню, то происходит неразбериха в анимации... Вот бы была функция, которая блокирует определенный яваскрипт, до полного окончания действия... |
вот, кста. код:
$("#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") или нет? |
Я для этого придумывал небольшой паттерн:
$(element).one("click", function () {
var self = $(this), callee = arguments.callee;
self.animate({ ... }, 1000, function () {
self.one("click", callee);
});
});
Т.е. навешиваем на элемент обработчик, который сработает только один раз (.one() же) и когда анимация закончилась, навешиваем его вновь. |
Matre,
все бы хорошо, если бы у меня была одна кнопочка(пункт меню).. в таком варианте, функция не будет "дублироваться сама собой", но если есть два элемента? Получается анимация будет выполняться, и если я нажму на пункт меню, который только что нажал, то все ок, но если я нажму на следующий пункт меню при незавершенной анимации.. опять дабл.. |
может в начале как-то остановить анимацию если она присутствует... но как???
или проверять если идет анимация - то ждать ее завершения.. |
Для этого есть ещё один паттерн:
$(parent).one("click", function (event) {
// делаем проверку, является ли event.target элементом, клик на который нужно обработать
// делаем действия, которые я привёл в первом примере, только .one() вешаем уже на parent
});
parent — общий для обоих элементов родительский эл-т. Т.о. мы делаем один обработчик на все элементы. |
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);
});
});
});
});
}
});
});
как-то так что ли? |
Цитата:
$(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 — сам элемент, кот. нужно обработать |
Спасибо огромное! Буду пробовать!
P.s. то есть метод each уже не нужен получается.. блин, тут получается, что анимате идет для элемента меню (так как на него кликают) .. а мне-то нужно так: кликаем на пункт меню, начинает анимироваться другой элемент, и пока он до конца не дойдет блокировать другие пункты меню... |
Ну так замените $(event.target) из 4-ой строчки на нужный Вам элемент.
|
Matre,
только что попробовал.. чутка еще подправил код и - ура - все заработало! Огромное спасибо! |
| Часовой пояс GMT +3, время: 07:07. |