title: Slide html content
body: <p>I found an example on how to use jquery slide effect, but im trying to modify it, so its not sliding all the divs, but only the once with a class of some name, I call the class: slide.</p>
  
  <p>It works the first time, but then the child div is being replaced by a blank page, until the next class div will show.. How do I correct this in jquery?</p>
  
  <p>I changed next("div") to next("div.slide") and I thought it was the only thing needed..</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="da"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;style&gt;
          .yourContainer{ position:relative; }
          .yourContainer div{ position:absolute; hight:300px; width:300px; }
      &lt;/style&gt;
  
      &lt;script type="text/javascript" charset="utf-8" src="jq/jquery-1.11.1.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8" src="jq/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="yourContainer"&gt;
          &lt;div class="slide" style="background:red;"&gt;some html
               &lt;div style="background:pink;"&gt;noooo&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="slide" style="background:yellow;"&gt;Other HTML&lt;/div&gt;
          &lt;div class="slide" style="background:blue;"&gt;4 HTML&lt;/div&gt;
          &lt;div class="slide" style="background:green;"&gt;5 HTML&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          $(function(){
      $('.yourContainer div:gt(0)').hide();
      setInterval(function(){$('.yourContainer :first-child').fadeOut(1000).next("div.slide").fadeIn(400).end().appendTo('.yourContainer');}, 3000);
  });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>