title: JQuery, fading cycle on li elements working in jsfiddle but not on site
body: <p>I have the following code working in a jsfiddle: <a href="http://jsfiddle.net/S5Cjm/1242/" rel="nofollow">http://jsfiddle.net/S5Cjm/1242/</a></p>
  
  <pre><code>function InOut(elem) {
  var delayOn = 2000, // time each &lt;li&gt; should be visible
      delayOff = 0, // time between revealing each &lt;li&gt;
      fade = 1000; // fade duration
  
  // Pause, fade in, pause again, fadeout, then fire the callback
  elem.delay(delayOff).fadeIn(fade).delay(delayOn).fadeOut(function() {
      // If we're not on the last &lt;li&gt;
      if (elem.next().length &gt; 0) {
          // Call InOut on the next &lt;li&gt;
          InOut(elem.next());
      }
      else {
          // Else go back to the start
          InOut(elem.siblings(':first'));
          }
      });
  }
  
  $(function() {
      // Hide all the li's
      $('#content li').hide();
      // Call InOut to loop through them
      InOut($('#content li:first'));
  });
  </code></pre>
  
  <p>​
  However, when embedded into my code it does not work.</p>
  
  <p>I am referencing JQuery in my head thus:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>It worked inexplicably once and has not again despite replicating the code.</p>
  
  <p>Any help greatly appreciated!</p>