Цикл цикла JS и цикл

Question

Я пытаюсь создать кусок js, который будет циклически отображать классы, а затем возвращаться к началу. для лучшего примера того, что я имею в виду;

У меня есть предложения, например:

"Я люблю кошка.

Я бы хотел, чтобы слово «кошки» было заменено словами «собаки», «хомяки», «львы» и «рыба», например. каждые 2 секунды одно слово будет изменено для другого с постепенным исчезновением, и как только последний будет достигнут, цикл начнется снова.

В настоящее время я пытаюсь сделать это, имея все 5 слов с другим классом и пытаясь изменить отображение каждого класса каждые 2 секунды. Однако я новичок в js, и я понимаю, что это неэлегантно и, возможно, неверно.

спасибо заранее за любую помощь, ребята :)

Answer 1

Один способ заключается в изменении его каждые 2 секунды с setInterval функциональностью JavaScript. У вас есть массив с животными, и вы проходите через него с помощью счетчика. Каждый раз, когда счетчик достигает длины массива минус 1, он будет сброшен. Вы можете остановить цикл, чтобы очистить setInterval. Это делается с clearInterval (переменная), и вы передаете в переменной setInterval - animalsLoop в нашем случае.

Код:

HTML:

<div class="js-animals"></div> 

Javascript:

var animals = ['cats', 'dogs', 'lions', 'fish']; 
var counter = 0; 

var animalsLoop = setInterval(function() { 

    $('.js-animals').text(animals[counter]); 

    if (counter === animals.length - 1) { 
     counter = 0; 
    } else { 
     counter++; 
    } 
}, 2000); 

JSFiddle:http://jsfiddle.net/x7wr4zLq/4/

EDIT: Если вы хотите, чтобы в процессе перехода происходило хорошее исчезновение/исчезновение, мы забываем о setInterval. Мы будем использовать jQuery fadeIn() и fadeOut() с функцией цикла. Так что происходит, так это то, что мы вызываем цикл [function после срабатывания fadeOut и после того, как он заканчивается, мы проверяем, нужно ли нам сбросить счетчик, и мы запускаем fadeIn. Когда fadeIn закончен, мы снова вызываем функцию цикла и т. Д. И т. Д.

delay() используется для dalay fadeOut. Вы можете установить, сколько времени вы хотите, чтобы текст отображался до его исчезновения.

Код:

HTML:

<div class="js-animals"></div> 

Javascript:

var animals = ['cats', 'dogs', 'lions', 'fish']; 
var counter = 0; 

// Initialize the first animal 
// so that we don't wait for the first iteration 
$('.js-animals').text(animals[counter]); 

function loop() { 

    $('.js-animals').delay(500).fadeOut(500, function() { 

     // Check if we need to reset the counter 
     if (counter === animals.length - 1) { 
      counter = 0; 
     } else { 
      counter++; 
     } 

     $(this) 
     .text(animals[counter]) 
     .fadeIn(500, loop); 
    }); 
} 

loop(); 

JSFiddle:http://jsfiddle.net/x7wr4zLq/3/