title: jquery .fadeIn .delay .fadeOut - not fading out
body: <p>Not sure what i'm doing wrong but these divs fade in correctly but don't fadeOut! </p>
  
  <p>They're intended to be on structured timeline in time with a mp3, hence the long delay times! </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
  div { position: absolute; width: 60px; height: 60px; float: left; display:none; }
  .first { background-color: #3f3; left: 0;}
  .second { background-color: #33f; left: 80px;}
  .third { background-color: #3f3; left: 120px;}
  .fourth { background-color: #33f; left: 300px;}
  .fifth { background-color: #3f3; left: 400;}
  &lt;/style&gt;
    &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ui.jquery.com/latest/ui/effects.core.js"&gt;&lt;/script&gt;
  &lt;script src="http://ui.jquery.com/latest/ui/effects.slide.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;&lt;button&gt;Run&lt;/button&gt;&lt;/p&gt;
  &lt;div class="first"&gt;&lt;/div&gt;
  &lt;div class="second"&gt;&lt;/div&gt;
  &lt;div class="third"&gt;&lt;/div&gt;
  &lt;div class="fourth"&gt;&lt;/div&gt;
  &lt;div class="fifth"&gt;&lt;/div&gt;
  
  &lt;script&gt;
      $("button").click(function() {
        $("div.first").delay(15060).show("puff", {}, 300).delay(116010).fadeOut(300);
        $("div.second").delay(40230).show("puff", {},300).delay(28990).fadeOut(300);
        $("div.third").delay(46180).show("puff", {},300).delay(27880).fadeOut(300);
        $("div.fourth").delay(71070).show("puff", {},300).delay(42050).fadeOut(300);
        $("div.fifth").delay(110080).show("puff", {},300).delay(17050).fadeOut(300);
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Mathletics i tried what you suggested but it broke it completely, any ideas what i may of done wrong? Sorry muddling through with my limited knowledge of Jquery </p>
  
  <p>Script changed but still not working?</p>
  
  <pre><code>&lt;script&gt;
  $("button").click(function() {
    $("div.first").delay(200).show(300, "puff", function() {
   $(this).delay(116010).fadeOut(300);  });
     $("div.first").delay(40230).show(300, "puff", function() {
   $(this).delay(28990).fadeOut(300);  });
     $("div.first").delay(46180).show(300, "puff", function() {
   $(this).delay(27880).fadeOut(300);  });
     $("div.first").delay(71070).show(300, "puff", function() {
   $(this).delay(42050).fadeOut(300);  });
     $("div.first").delay(110080).show(300, "puff", function() {
   $(this).delay(17050).fadeOut(300);  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks veeTrain, it almost works except i need them to come in at specific times as well as leave at specific times, here's how i changed the code to try to do that! Thanks in advance it's much appreciated! </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
  div { position: absolute; width: 60px; height: 60px; float: left; display:none; }
  .first { background-color: #3f3; left: 0;}
  .second { background-color: #33f; left: 80px;}
  .third { background-color: #3f3; left: 120px;}
  .fourth { background-color: #33f; left: 300px;}
  .fifth { background-color: #3f3; left: 400;}
  &lt;/style&gt;
    &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://ui.jquery.com/latest/ui/effects.core.js"&gt;&lt;/script&gt;
  &lt;script src="http://ui.jquery.com/latest/ui/effects.slide.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;&lt;button&gt;Run&lt;/button&gt;&lt;/p&gt;
  &lt;div class="first"&gt;&lt;/div&gt;
  &lt;div class="second"&gt;&lt;/div&gt;
  &lt;div class="third"&gt;&lt;/div&gt;
  &lt;div class="fourth"&gt;&lt;/div&gt;
  &lt;div class="fifth"&gt;&lt;/div&gt;
  
  &lt;script&gt;
      $("button").click(function() {
          console.log("hi");
        $("div.first").delay(15060).show(300);
        $("div.second").delay(40230).show(300);
        $("div.third").delay(46180).show(300);
        $("div.fourth").delay(71070).show(300);
        $("div.fifth").delay(110080).show(300);
          setTimeout(function() {
              $("div.first").fadeOut(300);
          }, 116010);
          setTimeout(function() {
              $("div.second").fadeOut(300);
          }, 28990);
          setTimeout(function() {
              $("div.third").fadeOut(300);
          }, 27880);
          setTimeout(function() {
              $("div.fourth").fadeOut(300);
          }, 42050);
          setTimeout(function() {
              $("div.fifth").fadeOut(300);
          }, 17050);
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>