У меня проблемы с моей функцией анимации. Я хочу, чтобы он запускался только один раз, но это не так. Я попытался отладить его с помощью .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:
Как я могу это решить?
Заранее спасибо!
Проблема заключается в том, что когда вы вызываете $(".progress").animate()
, анимация запускается на каждом элементе с классом "прогресс" для всего документа. Поскольку showNext()
вызывается рекурсивно, вы получаете несколько анимаций для каждого соответствующего элемента.
Все, что вам нужно сделать, - это ограничить вызов animate
для применения к текущему элементу в рекурсивном цикле. Поэтому измените значение на $(this).next().animate
и оно будет работать.
Скрипт: http://jsfiddle.net/etBLj/1/
Кроме того, я думаю, что JavaScript станет легче понять, если бы вы отделили "показ заголовков" от "анимирования индикаторов выполнения" и заменили рекурсивную функцию простым each
циклом. Например: http://jsfiddle.net/etBLj/2/