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