jQuery：延迟替换 div 的 innerHTML？

Question

我正在尝试使用 jQuery 淡出一个元素，替换其 innerHTML 并在替换内容后将其淡入。使用 .html() 方法和 .find() 方法替换元素的内容是可行的，但是一旦我尝试向查找和放置 [=17 的函数添加延迟=]，它停止工作。到目前为止，这是我的代码：

'#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

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

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

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

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

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

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


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

    $('#current-title').html($(document).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>

这里$(this)指的是Window对象。要获得处理程序，您需要使用 $(document) object

试试这个

Answer 2

这是一个使用 jQuery.fadeOut then 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>

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

Answer 3

在您的代码中，如果没有 setTimeout，this 指的是 window 对象。 window.find 将在当前 window 中搜索字符串。它不会搜索文档中的元素。 Refer this

this 在 setTimeout` 方法中 returns 一个函数对象。

因此您的代码在删除 this 后有效。

这有效。

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

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

    setTimeout(function() {
      //console.log(this) returns the window object
      $('#current-title').html($('#title1').html());
    }, 500);

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


  };

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


$(document).ready(function() {
  $.replaceNormal = function() {
    //console.log(this); returns a function object
    $('#current-title').html($('#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>

jQuery：延迟替换 div 的 innerHTML？

jQuery: Delayed replacing of a div's innerHTML?

html

javascript

css

jquery

innerhtml