title: Updating an array for jQuery fade in and fade out with setInterval
body: <p>I am trying to create a fade in/out effect with a array elements that change with time. The array will be updated by a function that fetches the array items from a external source on an hourly basis.</p>
  
  <p>The problem I am having is a seamless integration into jQuery fade in/fade out function. </p>
  
  <p>Currently, I have tried to use <em>setInterval</em> but I don't think that's the best approach. The fading elements start overlapping with each reiteration of the entire function.</p>
  
  <p>Here's what I've been working on:
  <a href="https://jsfiddle.net/gan5dt1n/" rel="nofollow noreferrer">https://jsfiddle.net/gan5dt1n/</a></p>
  
  <pre><code>var h = document.createElement('html');
  
  function horofunc() {
    item1 = new Date();
    item2 = new Date().getHours();
    item3 = new Date().getMinutes();
    item4 = new Date().getSeconds();
    item5 = "Line 5";
    dhsplit = [item1, item2, item3, item4, item5];
    console.log(dhsplit)
  
    for (i = 0; i &lt; dhsplit.length - 1; i++) {
      var line = document.createElement("div");
      line.className = "line";
      var node = document.createTextNode(dhsplit[i]);
      line.appendChild(node);
      var element = document.getElementById("scope");
      element.appendChild(line);
    }
  
  }
  
  
  function horosdisp() {
    $(function() {
      $('#scope div:gt(0)').hide();
      setInterval(function() {
          $('#scope :first-child').fadeOut(200)
            .next('div');
          $('#scope :first-child').fadeOut(200)
            .next('div').fadeIn(200);
          $('#scope :first-child').fadeOut(200)
            .next('div').end().appendTo('#scope');
        },
        1500);
    });
  }
  
  
  horofunc();
  horosdisp();
  setInterval(horofunc, 10000); //0*60*6);
  setInterval(horosdisp, 5000);
  </code></pre>
  
  <p>I am a total beginner in JS and I realise the solution could be obvious.
  The code might be very messy, but at the moment I am just trying to stitch things together so it works. Please forgive any redundancies in the code, I am still learning the basics of JS.</p>
  
  <p>Thanks!</p>