用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> 

Answer 2

可能是您可以在更改文本时尝试将不透明度设置为old =零到new = one。

选项 ：使用CSS3和Js（无jquery）

 document.addEventListener('DOMContentLoaded', function() { var quotes = ["Hello", "there", "everyone"]; var infos = document.querySelectorAll('div.info'); var repeat = Array.prototype.slice; var fadeIn = function(i) { if (!infos[i]) { return; } infos[i].innerHTML = quotes[i]; infos[i].classList.add("open"); }; repeat.call(infos).forEach(function(el) { var callBack = function(e) { var that = this; repeat.call(infos).forEach(function(cur, ind) { if (cur == that) { fadeIn(1 + ind); return false; } }); }; el.addEventListener('webkitAnimationEnd', callBack); el.addEventListener('animationEnd', callBack); }); fadeIn(0); /* trigger fade */ }); 

 .info { opacity: 0; filter: alpha(0%); border: 1px solid #ccc; margin: 1px 2px; } @keyframes fade { from { opacity: 0; filter: alpha(0%); } to { opacity: 1; filter: alpha(100%); } } .info.open { -webkit-animation: fade .3s; -moz-animation: fade .3s; -ms-animation: fade .3s; -o-animation: fade .3s; animation: fade .3s; opacity: 1; filter: alpha(100%); } 

 <div class="info"></div> <div class="info"></div> <div class="info"></div>