Эффект текста не правильно зацикливается в jQuery

Question

Я попытался показать текст с fadein и fadeout непрерывно. Вот fiddle, что я точно чувствую.

Вот JQuery, что я получаю сообщение в цикле

(function() { 

      var message = jQuery("#message_after_login"); 
      var message_index = 1; 

      function shownextmessage() { 
       ++message_index; 
       message.eq(message_index % message.length) 
         .fadeIn(2000) 
         .delay(2000) 
         .fadeOut(2000, shownextmessage); 
      } 

      shownextmessage(); 

     })(); 

Сейчас он появляется само первое сообщение зацикливание как FadeIn и FADEOUT, но не во втором сообщении. Я не знаю, где я ошибся.

Любое предложение было бы замечательным.

Answer 1

Вы не можете иметь 2 элементов с одинаковыми идентификаторами - id должен быть уникальным, вы можете использовать класс вместо идентификатора здесь

<div class ="message_after_login">Testing for first message</div> 
<div class = "message_after_login">This is for testing 2nd message</div> 

затем

(function() { 

    var message = jQuery(".message_after_login").hide(); 
    var message_index = -1; 

    function shownextmessage() { 
     ++message_index; 
     message.eq(message_index % message.length) 
      .fadeIn(2000) 
      .delay(2000) 
      .fadeOut(2000, shownextmessage); 
    } 

    shownextmessage(); 

})(); 

Демо: Fiddle

Answer 2

Вы повторяя идентификатор для двух DOM.

message_after_login использовать класс вместо ID.

Fiddle Demo

Answer 3

Выбор с использованием идентификатора выбирает только первый элемент. Если вы измените его на использование класса вместо id в своем HTML, используйте «.». вместо «#» в вашем селекторе он будет работать.