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

編輯---------

這是你所需要的for循環的一個原因？ For循環通常用於您想要運行語句並檢查特定次數的條件。不是當你想要代碼塊連續執行時。

我通過將您的字符串放置在一個變量設置索引並遞增.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>