title: jquery animate (several elements) queue
body: <p>I have several elements that are animated. If you quickly go back and forth over the submenu, there is a queue and in worst case the functionality seems to get corrupt. I already tried <code>stop()</code>, <code>delay()</code>, <code>:animated</code>.</p>
  
  <p>What do you recommend to make it happen :) ?</p>
  
  <pre><code>jQuery('.submenu').hover(
      function(){
      jQuery(this).find('.ico').delay(100).animate({
          height: 24
          }, 'fast', function() {
              jQuery(this).parents('.submenu').find('ul').animate({
                  height: 'toggle'
                  }, 'slow', function() {
              });
      });
  
  },
  function(){
      jQuery(this).find('ul').delay(100).animate({
          height: 'toggle'
          }, 'fast', function() {
              jQuery(this).parent().find('a.submenuItem .ico').animate({
                  height: 18
                  }, 'fast', function() {
                  });
      });
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;li class="submenu"&gt;&lt;a href="" class="submenuItem"&gt;About&lt;span class="ico"&gt;more&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Corporate&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Facts&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Press&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Franchising&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sponsoring&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
  </code></pre>