How do you set `innerText` with fade-in effect?

Question

Say you have a button to replace paragraphs within the same area, same page.

Can you make every switch, via setting innerText or textContent, fade in every time?

I now use keyframes to change its opacity from 0 to 1, but it only works for the first paragraph after the page is loaded. After that, whenever I replace the text with innerText, the effect doesn't show at all.

All the text waiting in line is hard coded in JavaScript, not in HTML - if it makes a change.

innerText is non standard - though, the current nightly of firefox have introduced it!! see [innerText](http://developer.mozilla.org/en-US/docs/Web/API/Node/innerText) and [textContent](http://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) for differences — Jaromanda X, Nov 27 '15 at 08:20
This post provides quick answer with jquery animate(). https://stackoverflow.com/q/6269606/11794467 — F.I., Aug 11 '21 at 17:25

score 7 · Accepted Answer · answered Nov 27 '15 at 08:49

You will need to either introduce a delay or a repaint. Introducing a delay is probably the easiest.

p.classList.add('hide');               // add the class
setTimeout(function() {                // delay and 
    p.textContent = txtList[idx];      // change text
    idx = (idx + 1) % txtList.length;
}, 500);
setTimeout(function() {                // delay and 
    p.classList.remove('hide')         // remove the class
}, 500);

Fiddle: http://jsfiddle.net/abhitalks/rdnt9d5w/

Snippet:

var txtList = [
    'Lorem', 'ipsum', 'dolor', 'sit', 'amet', 
    'Lorem ipsum dolor sit amet'
], idx = 0, 
   p = document.getElementById('p1');

document.getElementById('btn1').addEventListener('click', fadein);

function fadein() {
    p.classList.add('hide');
    setTimeout(function() { 
        p.textContent = txtList[idx];
        idx = (idx + 1) % txtList.length;
    }, 500);
    setTimeout(function() { 
        p.classList.remove('hide')
    }, 500);
}

p { opacity: 1; transition: all 0.5s; }
p.hide { opacity: 0; }

<p id="p1">Lorem ipsum dolor sit amet</p>
<hr />
<button id="btn1">Change</button>

Wesley Smith · Answer 2 · 2015-11-27T08:56:48.090

I would do it something like this:

var i = 0;
var strings = ['first string........', 'second string.........', 'third string..........', 'fourth string...............'];
$('#add-text').click(function () {

    if (i > strings.length - 1) i = 0;

    var $result = $('#result');
    $result.fadeOut("fast", function () {
        $result.text(strings[i]).delay(300).fadeIn('slow');
        i++;
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-text">Add Text</button><br>
<p id="result">Here is some default text....</p>

score 1 · Answer 3 · answered Nov 27 '15 at 08:29

1

Look this Fiddle

You can use jQuery text() function followed by fadeIn() to achieve this effect. Not sure if this works for Javascript's innerText

 $(this).text('Some other text!').fadeIn(500);

answered Nov 27 '15 at 08:29

abhishekkannojia

2,796
23
32

score -1 · Answer 4 · answered Nov 27 '15 at 08:29

-1

Have you tried adding a css transition?

For example, I use this to css to delay the background color transitions:

.fader {
        color: #bbb;
        padding: 6px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s; 
}

There is more informaiton on transitions on the w3c schools page: http://www.w3schools.com/css/css3_transitions.asp

answered Nov 27 '15 at 08:29

Karl Gjertsen

4,690
8
41
64

I've tried transition. I don't think it works when altering `innerText`. – Jason Lam Nov 27 '15 at 08:33

How do you set `innerText` with fade-in effect?

4 Answers4