JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<span class="count">100</span>%

<div class="parent">
  <span id="mySpan">Something in English</span>
</div>

JavaScript

function increaseJQ(){
  $('.count').each(function () {
      $(this).prop('Counter',0).animate({
          Counter: $(this).text()
      }, {
          duration: 10000,
          easing: 'linear',
          step: function (now) {
              $(this).text(Math.ceil(now));
          }
      });
        value = $(this).text();
      	if(value === 1000){
        	alert('Dan');
        }
  }); 
}


increaseJQ(); // Run Counter
list1 = 'Dan';
list2 = 'casa';
list3 = 'Techo';

function words(){
    $('#mySpan').animate({
        'opacity' : 0
    }, 400, function(){
        $(this).html(list2).animate({'opacity': 1}, 400);})
}
function words2(){
    $('#mySpan').animate({
        'opacity' : 0
    }, 400, function(){
        $(this).html(list3).animate({'opacity': 1}, 400);})
}
function words3(){
    $('#mySpan').animate({
        'opacity' : 0
    }, 400, function(){
        $(this).html(list1).animate({'opacity': 1}, 400);})
}
setTimeout(words, 2000);
setTimeout(words2, 4000);
setTimeout(words3, 6000);