title: Show and Hide divs using setInterval more Block
body: <p>I have seen the stack overflow thread show or hide div based on intervals.
  I dont know how to add more blocks. there is only two blocks repeated(block1 and block2).
  I need to add block 3 and 4. Please help me.
  I am new to jquery.</p>
  
  <p>Code:</p>
  
  <pre><code>var shortIntervalTime = 1500;
  var longIntervalTime = 7500;
  
  function cycle(id) {
      var nextId = (id == "block1") ? "block2" : "block1";
      initDisplayTimer(); // this line here only for demo purposes
      $("#" + id)
          .delay(shortIntervalTime)
          .fadeIn(500)
          .delay(longIntervalTime)
          .fadeOut(500, function () {
          cycle(nextId)
      });
      // ---------------------------------------------
      // this code after here only for demo purposes
      var timer;
      var cntr;
      var iterations = 0;
  
      function initDisplayTimer() {
          cntr = 0;
          ++iterations;
          $("#iterations").html("Iterations: " + iterations);
          if (timer) {
              clearInterval(timer);
          }
          timer = setInterval(function () {
              ++cntr;
              $("#timer").html("Seconds: " + (cntr / 10).toFixed(1));
          }, 100);
      }
      // end of demo code
      // ---------------------------------------------
      cycle("block1");
  });
  </code></pre>
  
  <p><a href="https://stackoverflow.com/questions/7869876/show-and-hide-divs-with-some-delay-using-setinterval-infinite-loop">Reference thread</a></p>
  
  <p>Thanks in advance.</p>