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设置showNextText函数处理索引切换的索引的0位置。

(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>

jQuery动画循环无法正常工作

2 个答案: