jquery .slideToggle wait till all other <li> are closed
<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>
