title: Jquery detect when end function and repeat
body: <p>I am trying to run a function when an animation finishes. I have tried the following, but it doesn't work:</p>
  
  <pre><code>function carrousel_header() {
      jQuery("#web_header_ani_ele_1").delay(2000).fadeIn(2000);
      jQuery("#web_header_ani_ele_2").delay(4000).fadeIn(2000);
      jQuery("#web_header_ani_ele_3").delay(6000).fadeIn(2000);
      jQuery("#web_header_ani_ele_4").delay(8000).fadeIn(2000);
      jQuery("#web_header_ani_ele_5").delay(10000).fadeIn(2000);
      jQuery("#web_header_ani_ele_6").delay(12000).fadeIn(2000);
  
      setInterval(carrousel_header(),1500);
  }
  </code></pre>
  
  <p>The idea is that the element show and hide themselves in a specific order. I need to be able to show/hide the next <code>&lt;div&gt;</code> after the last one has finished executing its animation.</p>
  
  <pre><code>&lt;div id="web_header_ani_ele_content"&gt;
      &lt;div id="web_header_ani_ele_1" style="display:none;"&gt;&lt;/div&gt;
      &lt;div id="web_header_ani_ele_2" style="display:none;"&gt;&lt;/div&gt;
      &lt;div id="web_header_ani_ele_3" style="display:none;"&gt;&lt;/div&gt;
      &lt;div id="web_header_ani_ele_4" style="display:none;"&gt;&lt;/div&gt;
      &lt;div id="web_header_ani_ele_5" style="display:none;""&gt;&lt;/div&gt;
      &lt;div id="web_header_ani_ele_6" style="display:none;"&gt;&lt;/div&gt;
      &lt;div id="web_header_ani_texto_1" style="display:none;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      carrousel_header();
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>MY CODE FOR WORKS WITH MODIFICATION , I ADD NOW</strong> </p>
  
  <pre><code>function carrousel_header()
  {
  jQuery("#web_header_ani_ele_1").delay(2000).fadeIn(2000);
  jQuery("#web_header_ani_ele_2").delay(2000).fadeIn(2000);
  jQuery("#web_header_ani_ele_3").delay(2000).fadeIn(2000);
  jQuery("#web_header_ani_ele_4").delay(2000).fadeIn(2000);
  jQuery("#web_header_ani_ele_5").delay(2000).fadeIn(2000);
  jQuery("#web_header_ani_ele_6").delay(2000).fadeIn(2000);
  
  
  jQuery("#web_header_ani_ele_1").hide(1);
  jQuery("#web_header_ani_ele_2").hide(1);
  jQuery("#web_header_ani_ele_3").hide(1);
  jQuery("#web_header_ani_ele_4").hide(1);
  jQuery("#web_header_ani_ele_5").hide(1);
  jQuery("#web_header_ani_ele_6").delay(2000).hide(1,function(){carrousel_header();});
  
  
  
  //setInterval(carrousel_header,1500);
  
  }
  </code></pre>