Показывает только последний элемент в массиве

Question

У меня есть код JQuery, как показано ниже. Я хочу пройти через все массивы - показать сообщение в течение 5 секунд, а затем перейти к следующему и показать его в течение 5 секунд, а затем перейти к следующему. Проблема в том, что он показывает только последний пункт - "Четыре".

  <script>
    $(function(){
      var myTab = ['One', 'Two', 'Three', 'Four']
      $(myTab).each(function(i, elem){
          $('#showHere').text(elem).fadeIn('slow').delay(5000).fadeOut('slow');
      })
    });
  </script>

Answer 1

Это потому, что ваш цикл заканчивается задолго до завершения первой анимации, и .text() не ждет анимации.

Чтобы исправить это, избавьтесь от .each()и использовать обратный вызов к .fadeOut() это вручную увеличивает счетчик.

$(function(){
  var i = 0; // maintain a counter
  var myTab = ['One', 'Two', 'Three', 'Four'];

  // Create a `cycle` function (invoked immediately, see below)
  (function cycle() {
      // Only try the display if `i` is in the Array range
      if (i < myTab.length) {
          $('#showHere').text(myTab[i])
                        .fadeIn('slow')
                        .delay(5000)
                        .fadeOut('slow', cycle); // Pass `cycle` as a callback
          i++;
      }
  })(); // Invoke `cycle` immediately
});

Answer 2

Прежде всего, вы должны схватиться за ручку div элемент, который вы вызываете несколько раз ради производительности:

var showHere =  $('#showHere');

Тогда вы хотите использовать setTimeout функция:

 var myTab = ['One', 'Two', 'Three', 'Four']
 var showHere =  $('#showHere');
 $(myTab).each(function (i, elem) {
     setTimeout( function(){
             showHere.text(elem).fadeIn('slow').fadeOut('slow');
     }, i*2000);
 });

Обратите внимание, что мы умножаем setTimeout время по индексу, иначе все будет выполнено в тот же период времени.

Рабочая скрипка: http://jsfiddle.net/urahara/49ka7oph/1/