JQuery text transition

by m4xout

HTML

<a id="link" href="#">
  <div id="word">Alpha</div>
</a>

CSS

body {background: grey;}

JavaScript

$(function () {
  count = 0;
  wordsArray = ["Beta", "Alpha"];
  linksArray = ["Gamma", "Delta"];
  setInterval(function () {
    count++;
    $("#word").fadeOut(400, function () {
      $(this).text(wordsArray[count % wordsArray.length]).fadeIn(400);
    });
    $("#link").fadeOut(400, function () {
      $("a#link").prop("href", "http://www.jakcms.com")
    });
  }, 2000);
});

setInterval(function () {

  }, 2000);
  
  /*
  var text1 = "{{ section.settings.announcement_text }}"
            console.log(text1);
          var link1 = "{{ section.settings.announcement_link }}"
            console.log(link1);
          var text2 = "{{ section.settings.announcement_text_alt }}"
            console.log(text2);
          var link2 = "{{ section.settings.announcement_link_alt }}"
            console.log(link2);
            
            */