adding fadein effect with inner.HTML

Question

Looking to fade-in content when using inner.HTML.

Current code;

<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';}
         } 

I attempted using css however it doesn't create the effect due to setTimeout.

Is there a simple solution using CSS or JS? Or even jQuery if need be?

Answer 1

That is easy to do with jQuery, since there are methods for simple animations like this.

Have a look at .fadeIn() and .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

May be you can try using opacity set to old=zero to new=one while changing text.

Option : Using CSS3 and Js(no 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>