javascript - jQuery:延迟替换 div 的 innerHTML？

Question

我正在尝试使用 jQuery 淡出一个元素，替换它的 innerHTML 并在内容被替换后淡入。使用 .html()-method 和 .find()-method 替换元素的内容是可行的，但是一旦我尝试添加延迟对于查找和放置 innerHTML 的函数，它停止工作。到目前为止，这是我的代码:

'#current-title' 是内容应该被替换的元素； '#title1' 包含应该在 '#current-title' 中结束的文本。所有这一切都应该在放置新文本之前和之后通过 '#current-title' 的过渡不透明度变化来实现。

$(document).ready(function() {
  $.replace = function() {

  $('#current-title').css("opacity", "0");

  setTimeout(function() {
    $('#current-title').html($(this).find('#title1').html());
  }, 500);

  setTimeout(function() {
    $('#current-title').css("opacity", "1");
  }, 1000);

  alert('Title has been replaced.');
  };

  $(".replace-btn").click(function() {
    $.replace();
  });
});

相同功能的缩减版本，仅替换 '#current-title' 的 html 而没有 setTimeout，工作正常:

$(document).ready(function() {
  $.replace = function() {

    $('#current-title').html($(this).find('#title1').html());

    alert('Title has been replaced.');
  };

  $(".replace-btn").click(function() {
    $.replace();
  });
});

为什么我的第一段代码中的 setTimeout 不起作用？

---

$(document).ready(function() {
  $.replaceDelayed = function() {

    $('#current-title').css("opacity", "0");

    setTimeout(function() {
      $('#current-title').html($(this).find('#title1').html());
    }, 500);

    setTimeout(function() {
      $('#current-title').css("opacity", "1");
    }, 1000);

    setTimeout(function() {
      alert('Title has been replaced.');
    }, 1000);
  };

  $(".replace-btn").click(function() {
    $.replaceDelayed();
  });
});


$(document).ready(function() {
  $.replaceNormal = function() {

    $('#current-title').html($(this).find('#title1').html());

    alert('Title has been replaced.');
  };

  $(".replace-btn2").click(function() {
    $.replaceNormal();
  });
});

.title {
  visibility: hidden;
}

* {
  transition: opacity 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-title">
  <a>Project Title #0</a>
</div>

<br>

<div class="title" id="title1">
  <a>Project Title #1</a>
</div>

<br>

<button class="replace-btn">
  Replace Title (with delay)
</button>

<button class="replace-btn2">
  Replace Title (without delay)
</button>

Answer 1

这是一个使用 jQuery.fadeOut 的简单示例然后 jQuery.fadeIn :

$(document).ready(function() {
  var count = 0;
  $( "p" ).click(function() {
    ++count;
    $this = $(this);
    $this.fadeOut(500, function() {
      $this.html("Project Title #" + count);
      $this.fadeIn(500);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Project Title #0</p>

运行代码片段，然后每次单击元素标题时，它都会淡出，其编号递增，然后淡入。