title: jquery .slideToggle wait till all other <li> are closed
body: <p>Hi all I use a php script to pull the names of the products from a mysql db and display them into a list, each list has 4 sub list elements that are displayed and hidden (toggled) via jquery. my issue is if i move my cursor from on product to the next then it starts opeing that products <code>&lt;li&gt;</code> elements before the other one has closed. Such to the effect that if i run my cursor up the list it looks like a slinky :D</p>
  
  <p>how can i tell the jquery to wait till all other toggles have finished before running the new one?</p>
  
  <pre><code>while($info = mysql_fetch_array( $result ))
      {
      $str .="
                &lt;li id='mas".$info['name']."'&gt;&lt;span&gt;".$info['name']."&lt;/span&gt;
                &lt;ul id='sub".$info['name']."' class='sub' style='display:none'&gt;
                &lt;li&gt;&lt;span&gt;Scripts&lt;/span&gt;&lt;/li&gt;
                &lt;li&gt;&lt;span&gt;Questions&lt;/span&gt;&lt;/li&gt;
                &lt;li&gt;&lt;span&gt;Forum&lt;/span&gt;&lt;/li&gt;
                &lt;li&gt;&lt;span&gt;Tips and Tricks&lt;/span&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;/li&gt;
  
                &lt;script type='text/javascript'&gt;   
                $('#mas".$info['name']."').hover(function () {
                $('#sub".$info['name']."').slideToggle('slow');
                });
                &lt;/script&gt;
  
            ";
      }
      echo $str;
  </code></pre>