JSFiddle - React, Tailwind, and code Playground

HTML

<script src=Run"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div id="hidden-content" style="display:none;">
    <div id="text-slider">
        <span class="span_aaa">aaaaaaa</span>
        <span class="span_bbb">bbbbbbbbbbbbbbbb</span>
        <span class="span_ccc">ccc</span>
        <span class="span_ddd">ddddddd</span>
        <span class="span_eee">eeeeeee</span>
        <span class="span_fff">fff fff fffffff</span>
    </div>

    <div id="title-slider">
        <span class="span_aaa">aaa title</span>
        <span class="span_bbb">bbb title</span>
        <span class="span_ccc">ccc title</span>
        <span class="span_ddd">ddd title</span>
        <span class="span_eee">eee title</span>
        <span class="span_fff">fff title</span>
    </div>

</div>



<div id="title-content">

</div>

<div id="text-content">

</div>

JavaScript

$(document).ready(function ()
{



    var terms = ["span_aaa", "span_bbb", "span_ccc", "span_ddd", "span_eee", "span_fff"]; //array of terms to rotate


    function rotateTerm() {
        var ct = $("#text-content").data("term") || 0;

        $("#text-content").data("term", ct == terms.length -1 ? 0 : ct + 1).text($('#text-slider .'+terms[ct]).html()+ct)
                .fadeIn().delay(2000).fadeOut(200);

        $("#title-content").text($('#title-slider .'+terms[ct]).html()+ct)
                .fadeIn().delay(2000).fadeOut(200, rotateTerm);

    }
    $(rotateTerm); //start it on document.ready

});