У меня была функция, которая выглядит так:
function show_services_title(show_services){
$('.service').fadeOut();
$.each($('.service'), function(i) {
$(this).delay(500*i).fadeIn();
});
}
Теперь эти функции вызывается, когда я нажимаю на ссылку, проблема в том, что когда я нажимаю ссылку, функция начинает показывать каждый div с помощью класса "service", но когда я снова нажимаю ссылку, и divs не заканчиваются показывая, но затем возникает беспорядок на экране.
Вот пример, который имитирует поведение, которое я пытаюсь описать, и я хочу избежать.
Попробуйте отключить запуск анимации во второй раз, когда предыдущая анимация все еще работает.
$(document).ready(function(){
$('#link').click(function(){
show_services_title();
});
});
function show_services_title(show_services){
//if we're already animating, don't start a new one
if($('ul').attr('data-animating') != 'true'){
//make sure other clicks dont trigger this animation
$('ul').attr('data-animating', 'true');
$('.service').fadeOut();
$.each($('.service'), function(i, element) {
setTimeout(function(){
$(element).fadeIn();
//check if this is the last element we're gonna animate
if(i == $('.service').length-1){
//animation is done, allow new animations to start
$('ul').attr('data-animating', 'false');
}
}, 500*i);
});
}
}
if(i == $('.service').length - 1) {...}
помещался в обратный вызов, как это ?
$('.service').stop().fadeOut();
Покажи фокус?