title: trouble getting simple jquery slider to work
body: <p>What i am tring to code is that, when my slides class with filter first should animate to the left and fadeout and then it should get appended to the bottom of the carousel inner class. somehow.. its not working. please help. Thanks in advance</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;slider&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="assets/css/slider.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="carousel"&gt;
          &lt;div class="carousel_inner"&gt;
              &lt;figure class="slides"&gt;
                  &lt;img src="assets/images/post4.jpg"&gt;
              &lt;/figure&gt;
              &lt;figure class="slides"&gt;
                  &lt;img src="assets/images/post4-2.jpg"&gt;
              &lt;/figure&gt;
              &lt;figure class="slides"&gt;
                  &lt;img src="assets/images/post4-3.jpg"&gt;
              &lt;/figure&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;script type="text/javascript" src="assets/js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="assets/js/slider.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JQuery:</strong></p>
  
  <pre><code>$(document).ready(function(){
      setInterval(function(){
         $(".slides:first").animate({"margin-left":"-290px"}).fadeOut().end().appendTo(".carousel_inner");
      },2000);
  });
  </code></pre>