javascript - 使用 inner.HTML 添加淡入淡出效果

Question

在使用 inner.HTML 时寻找淡入内容。

当前代码；

<td style="width: 20%;" class="responsive-td" valign="top">
          <div id="placeholder1" class="placeholder1" style="color:white;"></div>
        </td>

if (//logic here){

          document.getElementById('placeholder1').innerHTML ='add this with fading effect';

          setTimeout(addFn1, 300);
           function addFn1() {
            document.getElementById('placeholder2').innerHTML ='add this with fading effect';}       

    setTimeout(addFn2, 1200);
           function addFn2() {
            document.getElementById('placeholder3').innerHTML ='add this with fading effect';}
         } 

我尝试使用 css，但由于 setTimeout，它没有产生效果。

是否有使用 CSS 或 JS 的简单解决方案？如果需要，甚至是 jQuery？

Answer 1

使用 jQuery 很容易做到这一点，因为有像这样的简单动画的方法。

看看.fadeIn()和 .fadeOut() .

if (true){

  $('#placeholder1').html('add this with fading effect').fadeIn(600);

  setTimeout(addFn1, 300);
  function addFn1() {
    $('#placeholder2').html('add this with fading effect').fadeIn(600);}       

  setTimeout(addFn2, 1200);
  function addFn2() {
    $('#placeholder3').html('add this with fading effect').fadeIn(600);}
}

body{
  background-color:black;
}
.placeholder1{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td style="width: 20%;" class="responsive-td" valign="top">
  <div id="placeholder1" class="placeholder1" style="color:white;"></div>
  <div id="placeholder2" class="placeholder1" style="color:white;"></div>
  <div id="placeholder3" class="placeholder1" style="color:white;"></div>
</td>