JQuery Animate работает много раз

0

У меня проблемы с моей функцией анимации. Я хочу, чтобы он запускался только один раз, но это не так. Я попытался отладить его с помощью .stop(); но это тоже не сработало, поэтому прямо сейчас я понятия не имею, как это решить.

JavaScript:

$(".box").hide();

$(".box").contents().not(".progress").hide();

$(".box").first().show(150, function showNext () {

    var next = $(this).next(".box");

    if (next.length > 0) {

        next.show(150, showNext);

    } else {

        $(".box").contents().not(".progress").fadeIn(800, function () {

        $(".progress").animate({

            width: 'toggle'

        }, 800);


        });

    }
});

Проблема легче увидеть на этом jsfiddle:

http://jsfiddle.net/etBLj/

Как я могу это решить?

Заранее спасибо!

Теги:

1 ответ

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

Проблема заключается в том, что когда вы вызываете $(".progress").animate(), анимация запускается на каждом элементе с классом "прогресс" для всего документа. Поскольку showNext() вызывается рекурсивно, вы получаете несколько анимаций для каждого соответствующего элемента.

Все, что вам нужно сделать, - это ограничить вызов animate для применения к текущему элементу в рекурсивном цикле. Поэтому измените значение на $(this).next().animate и оно будет работать.

Скрипт: http://jsfiddle.net/etBLj/1/

Кроме того, я думаю, что JavaScript станет легче понять, если бы вы отделили "показ заголовков" от "анимирования индикаторов выполнения" и заменили рекурсивную функцию простым each циклом. Например: http://jsfiddle.net/etBLj/2/

  • 0
    Спасибо, это сработало! Также спасибо за отличный ответ!

Ещё вопросы

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