Элементы массива повторяются при setInterval

Вопрос-ответ JavaScript
1

Когда ставлю интервалы, элементы массива копируются. То есть, вместо того, чтобы вывести текст "Make You Dreams Come True один раз и повторить, этот текст выводится несколько раз. Проблема не в самих интервалах, а где-то в цикле. Вот только, что сделала не так, не могу понять.

    var words = ["Make", "Your Dreams", "Come True"];

function text() {
  for (var i = 0; i < words.length; i++) {
    $("#motivation-words").append("<p>" + words[i] + "</p>");
    $("#motivation-words").last().hide().slideDown((i + 1) * 4000).fadeOut(2000);
  };

}
setInterval(text, 2000);

Если что я только учусь, не судите строго :)

2

Не совсем понятна проблема: что означает “ставлю интервалы”, “вывести один раз и повторить” (т.е. вывести дважды?), “элементы массива копируются” (куда они копируются, вроде не видно, чтобы их копировали) :)
Думаю, вопрос всё же в setInterval - 2000 - это промежуток времени, через который будет повторяться вызов функции, но ничто не останавливает этот вызов, поэтому функция будет выполняться бесконечно

3

Спасибо за ответ. Под “повторятся” имелось в виду, то, что это все выглядит так, как на картинке

12
121366×657 39.3 KB
,

А задумывалось, чтобы текст не дублировался, а просто появлялся заново с интервалами

4

Т.е. Вы хотите, чтобы этот слоган как бы развернулся постепенно, потом исчез и снова плавно появился на том же месте, так?

5

да

6

Таким результат должен быть? https://jsfiddle.net/LenaR/4osj7prd/

7

Спасибо большое за ответ. Не совсем, планировалось, чтобы после появления текст исчезал и с интервалами появлялся снова. У меня же старый текст не исчезает, а с интервалами просто под ним появляется новый. То есть, вместо того, чтобы проигрываться по новой, функция дублируется под уже выполненной. Пробовала ставить fadeOut но это не решило проблемы

8

можно подробное описание - как должно работать в итоге?
Текст Make Your dreams Come true - это должен быть один div-контейнер, который исчезает и снова появляеться через 4 сек, и так постоянно? (то-есть - мигает каждые 4 сек). Но изначально при загрузке страницы - текст видимый. Все верно?

9

изначально текст невидимый, потом появляется, а потом как вы описали: исчезает и снова появляется.

По сути, нужно то, что вы сделали здесь https://jsfiddle.net/LenaR/4osj7prd/ после выполнения исчезло и повторилось снова и так бесконечное количество раз

10

А может текст изначально внести в html? В общем диве каждое слово поместить в тег p. И управлять видимостью этих тегов, а не каждый раз вставлять новый элемент в документ.

11

спасибо) все решилось миниатюрным куском кода!

12

Делюсь, на случай, если кто-то столкнется с аналогичной проблемой:

Записала каждую строчку текста в новом параграфе, и прописала JS таким образом:

function text() {
  $("#make").hide().show(1000);
  $("#your-dreams").hide().show(2000);
  $("#come-true").hide().show(3000);
}

setInterval (text, 4000);
1 лайк