Цикличная замена слова в предложении по времени javascript

Question

подскажите с решением вопроса, никак не могу разобраться сам. Есть, например, предложение: <p>Я ем <span id='type'>яблоки</span></p>

Есть массив в js let a = ['груши', 'персики', 'киви']

Как написать функцию, чтобы слово яблоки плавно заменялось другим (типа fadeOut\fadeIn), взятым из массива, каждые 3 секунды?

Я пробую такую функцию, но чувствую, что я не догоняю.

$.each(a,function(index,value){
        setInterval(function() {
        document.getElementById('type').textContent = a[key];
    }, 3000);

Answer 1

Можно соорудить что-то такое как вариант.

const fruit = document.getElementById('type');
let a = ['груши', 'персики', 'киви'];

let counter = 0;
const timer = setInterval(() => {
  if (counter == a.length) counter = 0;
  fruit.classList.toggle('active');
  setTimeout(() => {
    fruit.textContent = a[counter];
    fruit.classList.toggle('active');
    counter++;
  }, 400)
}, 3000)

#type {
  transition: opacity .4s;
  opacity: 0;
}

#type.active {
  opacity: 1;
}

<p>Я ем <span class="active" id='type'>яблоки</span></p>

Answer 2

(function (f, a, s, t) {
  setInterval(() => {
    f.fadeOut(() => {
         f.text(s[++a == s.length ? (a = 0) : a]).fadeIn();
    });
  }, t);
}(jQuery('#type'), 0, ['груши', 'персики', 'киви'], 3000));

БЛОГ НА HUSL

Цикличная замена слова в предложении по времени javascript

Ответы (2 шт):