title: Jquery: small slideshow, how to create a var for the next slide to fade in over the top, and problem with setInterval
body: <p><a href="http://jsfiddle.net/nicktheandroid/B7Rhe/5/" rel="nofollow">http://jsfiddle.net/nicktheandroid/B7Rhe/5/</a></p>
  
  <p>I'm trying to make the next slide fade in over the current slide, instead of fading all slides out before fading the next one in. I can't figure it out.</p>
  
  <p>also, notice what i've commented out. I tried to make this a function, then call setInterval on the function, but it wasn't working, so I just setInterval around the function itself, instead of calling the function inside setinterval.</p>
  
  <p>any help or recommendation is greatly appreciated.</p>
  
  <pre><code>var x = 2;
  console.log('Not broken');
  
  setInterval(function() {
  // function slideshow() {
      var m = $('.slideshow li').size();
      x += 1;
      if (x &gt; m) {
          x = 1;
      }
      $(".slideshow ul li:nth-child(" + (x) + ")").animate({
          opacity: 1
      });
      $(".slideshow ul li:nth-child(n)").animate({
          opacity: 0
      });
      $(".slideshow ul li:nth-child(" + (x) + ")").animate({
          opacity: 1
      });
  // }
  }, 2000);
  
  //setInterval("slideshow()", 1000);
  </code></pre>