Question

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

我得到的问题是在转换出第二个短语时应用淡出效果，然后返回附加有效淡入效果的第一个短语。如果没有淡出效果，它会按预期工作，但如果包含它，它将不会循环回到开始。

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

这是破碎的代码：

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 = '' + str.join('') + ''; $(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 = $("Second Phrase.").hide(); $('#motto').replaceWith(div); $('#motto').fadeIn("slow", 'swing', function() { setTimeout(function() { var reset = $(""); $('#motto').replaceWith(reset).fadeOut('slow', 'swing', function() { index = 0; Start(); }); }, 3000); }); }); }。如果删除该方法调用，则代码循环正常。

工作解决方案：

＆＃13;

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

＆＃13;

@property (nonatomic) AFHTTPSessionManager *manager;

＆＃13;

循环时jQuery fadeOut不工作

1 个答案: