Как избежать дублирования каждого цикла в jquery?

0

У меня была функция, которая выглядит так:

function show_services_title(show_services){
    $('.service').fadeOut();
    $.each($('.service'), function(i) {
        $(this).delay(500*i).fadeIn();
    });
}

Теперь эти функции вызывается, когда я нажимаю на ссылку, проблема в том, что когда я нажимаю ссылку, функция начинает показывать каждый div с помощью класса "service", но когда я снова нажимаю ссылку, и divs не заканчиваются показывая, но затем возникает беспорядок на экране.

Вот пример, который имитирует поведение, которое я пытаюсь описать, и я хочу избежать.

http://jsfiddle.net/bw7jn/4/

  • 0
    Как вы хотите решить это? Сбросить анимацию при нажатии во второй раз? Или не начинать новый?
  • 2
    Может быть $('.service').stop().fadeOut(); Покажи фокус?
Показать ещё 8 комментариев
Теги:
each
function

1 ответ

1
Лучший ответ

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

$(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);
        });
    }
}

http://jsfiddle.net/bw7jn/7/

  • 1
    Разве не было бы лучше, если бы if(i == $('.service').length - 1) {...} помещался в обратный вызов, как это ?
  • 0
    Да, хорошо, чтобы предотвратить наложение в последней анимации
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню