Почему-то не останавливается анимация, она зациклилась, как быть?

Question

[_ umr]

Привожу код

Зацикливается это

// Функция запуска анимации
	function show_animate(id) {
		id = id || 1;

		/*
			Берем фак контайнер из активного интрослайда
			и проигрываем анимацию при загрузке этого слайда делая ширину фак контайнера в 100%
		*/
		$("[data-id=" + id + "] .fuck-container").animate({ "width": "100%" }, 1000);

		// Дальше нужно красивенько показать титлы
		$("[data-id=" + id + "] .intro-title h1 i").each(function(i, elem){
			$(elem).animate({
				"top": "0"
			}, 500);
		});

		// А теперь берем позицию изображения по left и анимируем изображения чуть ближе к центру
		var from_left = $("[data-id=" + id + "] .main-img").data("left");
		$("[data-id=" + id + "] .main-img").animate({
			"left": from_left - 7 + "%",
			"opacity": 1
		}, 450);

		$("[data-id=" + id + "] .path-container").css("display", "block");

		return id;
	}

Она вызывается два раза, один раз в самом начале после объявления, для запуска анимации первого слайда
var id = show_animate();

Потом вызывается, после того, как ползунок довели до 175 пикселей или больше в фукнции setInterval, но уже для другого слайда (следующего)

if(score > 175) {
			$("[data-id=" + id + "] .fucker").animate({
		        "left": 185-5
		    });

			hide_animate(false, function() {
				$("[data-id=" + id + "] .go_to_the_fuck").addClass("active");
			});

			setInterval(function() { $("[data-id=" + id + "]").addClass("active-loader"); }, 1000);
			setInterval(function() { show_animate(2); }, 1100);
		}

Answer 1

[Андрей]

setInterval замени на setTimeout - полегчает немного

Чтобы анимация не была зациклена нужно уметь ее останавливать. Если был запущен setInterval, то он будет вызывать переданную функцию через заданные промежутки времени пока страница не будет закрыта - вот и получается зацикленная бесконечная анимация. Если не подходит setTimeout, то, скорее всего, нужно несколько раз выполнить функцию анимации. Нужно условие по которому можно стопнуть setInterval.

function repeatWithInterval(callback, interval, repeatCount) {
  repeatCount = repeatCount != null ? repeatCount : Infinity;
  var count = 0;
  var timer = setInterval(function() {
    callback();
    if(++count >= repeatCount) {
      clearInterval(timer);    
    }
  }, interval);
}

repeatWithInterval(function() { show_animate(2); }, 1100, 4);

Конечно, условие для прерывания цикла может быть любым.
Таким образом, ответ на вопрос "Почему-то не останавливается анимация, она зациклилась, как быть?" - нужно уметь прерывать анимацию, нужно контролировать количество вызовов функци show_animate.

Comments

[_ umr]

таймаут не подходит