Untitled

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <title>My SATX</title>
  <style>
    .quote-rotate {
      display: inline-block;
      padding: 5px 10px 5px 10px;
      position: relative;
      left: 30%;
      font-style: italic;
      font-size: 2rem;
    }
  </style>

</head>
<body>

  <p class="quote-rotate"><span id="rotate"></span></p>

  <script src="/js/jquery.js"></script>

  <script>
  "use strict";
  $(document).ready(function() {

    var quotesSA = ["Love San Antonio!", "Great place to visit...", "Beautiful city!"];

    function rotateTerm() {
      var currentTerm = $("#rotate").data("quotesSA") || 0; // get current term, defaulting to 0 if there is no current term
        $("#rotate") // find element with id="rotate"
          .data("quotesSA", currentTerm == quotesSA.length - 1 ? 0 : currentTerm + 1) //store next term, looping to the beginning of the array as necessary
          .text(quotesSA[currentTerm]) // set the text of the span
          .fadeIn() // fade the element in from full transparency
          .delay(2000) // wait 2 seconds
          .fadeOut(200, rotateTerm); // fade the element out to full transparency and call this function again
    }
      $(rotateTerm);
  });

  </script>

</body>
</html>