JQuery цикл одушевленные не работает должным образом

Question

  for (i = 0; i < 100; i++) { 
 
       $('#container').animate({ 'opacity': 0 }, 1000, function() { 
 
        $(this).text('Just Do It.'); 
 
       }).animate({ 'opacity': 1 }, 1000, function() { 
 
        $(this).animate({ 'opacity': 0 }, 1000, function() { 
 
         $('#container').text('Nike'); 
 
         $('#container').animate({ 'opacity': 1 }, 1000); 
 
        }); 
 
       }); 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container">Nike</div>

   $('#container').animate({ 'opacity': 0 }, 1000, function() { 
 
        $(this).text('Just Do It.'); 
 
       }).animate({ 'opacity': 1 }, 1000, function() { 
 
        $(this).animate({ 'opacity': 0 }, 1000, function() { 
 
         $('#container').text('Nike'); 
 
         $('#container').animate({ 'opacity': 1 }, 1000); 
 
        }); 
 
       }); 
 
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container">Nike</div>

Таким образом, цель моего кода был успешно цикл замирание и исчезать эффект за исключением использования прозрачности и анимации , Код без цикла for работает отлично сам по себе, но как только я пытаюсь его зацикливать, он просто зацикливает часть «просто сделай это», если кто-то может помочь мне разобраться в этом, было бы весьма полезно.

Answer 1

EDIT ---------

Является ли это причиной вам нужно для цикла? Для циклов обычно используются, когда вы хотите запускать инструкции и проверять условия определенное количество раз. Не когда вы хотите, чтобы блок кода выполнялся непрерывно.

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

(function() { 
 

 
    var text = $(".text"); 
 
    var textIndex = -1; 
 
    
 
    function showNextText() { 
 
     ++textIndex; 
 
     text.eq(textIndex % text.length) 
 
      .fadeIn(1000) 
 
      .delay(1000) 
 
      .fadeOut(1000, showNextText); 
 
    } 
 
    
 
    showNextText(); 
 
    
 
})();

.text {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text">Nike</div> 
 
<div class="text">Just Do It.</div>

Answer 2

Проверить этот пример:

var i = -1; 
 
var x = -1; 
 
var max = 100; 
 
var txt = ["Nike", "Just Do It", "BMW"]; 
 

 
anim(); 
 

 
function anim() { 
 
    if (x == max) return; 
 
    x++; 
 
    i++; 
 
    if (i == txt.length) { 
 
    i = 0; 
 
    } 
 

 
    $('#container').animate({ 
 
    'opacity': 0 
 
    }, 1000, function() { 
 
    $(this).text(txt[i]); 
 
    }).animate({ 
 
    'opacity': 1 
 
    }, 1000, function() { 
 
    $(this).animate({ 
 
     'opacity': 0 
 
    }, 1000, anim); 
 
    }); 
 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"></div>