jQuery 循环时 fadeOut 不工作

Question

我正在尝试实现此脚本，它将数组中的单词附加到 <p> 标记上，完成后将用另一个短语替换完整的句子，然后重新开始。

我遇到的问题是在从第二个短语过渡到附加第一个具有淡入淡出效果的短语时应用淡出效果。没有淡出效果，它会按预期工作，但是当包含它时，它不会循环回到开头。

任何人都可以帮我弄清楚为什么淡出效果会弄乱代码以及如何让它与淡出效果一起工作。

这是损坏的代码：

var index = 0;
Start();

function Start() { // DOM ready
  var str = ["First", ", Second", ", Third", ", Fourth."];
  var spans = '<span>' + str.join('</span><span>') + '</span>';
  $(spans).hide().appendTo('#motto').each(function(i) {
    $(this).delay(2000 * i).fadeIn('slow', 'swing', function() {
      if (index == 3) {
        setTimeout(Restart, 2000);
      } else {
        index++;
      }
    });
  });
}

function Restart() {
  $('#motto').fadeIn('slow', 'swing', function() {
    var div = $("<p id='motto'>Second Phrase.</p>").hide();
    $('#motto').replaceWith(div);
    $('#motto').fadeIn("slow", 'swing', function() {
      setTimeout(function() {
        var reset = $("<p id='motto'></p>").hide();
        $('#motto').replaceWith(reset).fadeOut('slow', 'swing', function() {
          index = 0;
          Start();
        });
      }, 3000);
    });
  });
}

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

下面是没有淡出效果的代码：

var index = 0;
Start();

function Start() { // DOM ready
  var str = ["We Listen", ", We Plan", ", We Advise", ", We Deploy."];
  var spans = '<span>' + str.join('</span><span>') + '</span>';
  $(spans).hide().appendTo('#motto').each(function(i) {
    $(this).delay(2000 * i).fadeIn('slow', 'swing', function() {
      if (index == 3) {
        setTimeout(Restart, 2000);
      } else {
        index++;
      }
    });
  });
}

function Restart() {
  $('#motto').fadeIn('slow', 'swing', function() {
    var secondPhrase = $("<p id='motto'>Everything you need for a successful implementation.</p>").hide();
    $('#motto').replaceWith(secondPhrase);
    $('#motto').fadeIn("slow", 'swing', function() {
      setTimeout(function() {
        var reset = $("<p id='motto'></p>");
        $('#motto').replaceWith(reset);
        index = 0;
        Start();
      }, 3000);
    });
  });
}

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

Answer 1

这是因为您在损坏的示例中将 .hide() 附加到 reset 声明的末尾。如果删除该方法调用，代码将正常循环。

工作解决方案：

var index = 0;
Start();

function Start() { // DOM ready
  var str = ["First", ", Second", ", Third", ", Fourth."];
  var spans = '<span>' + str.join('</span><span>') + '</span>';
  $(spans).hide().appendTo('#motto').each(function(i) {
    $(this).delay(2000 * i).fadeIn('slow', 'swing', function() {
      if (index == 3) {
        setTimeout(Restart, 2000);
      } else {
        index++;
      }
    });
  });
}

function Restart() {
  $('#motto').fadeIn('slow', 'swing', function() {
    var div = $("<p id='motto'>Second Phrase.</p>").hide();
    $('#motto').replaceWith(div);
    $('#motto').fadeIn("slow", 'swing', function() {
      setTimeout(function() {
        var reset = $("<p id='motto'></p>");
        $('#motto').replaceWith(reset).fadeOut('slow', 'swing', function() {
          index = 0;
          Start();
        });
      }, 3000);
    });
  });
}

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

jQuery 循环时 fadeOut 不工作

jQuery fadeOut not working when looping

javascript

jquery

fadeout