Need help to form Jquery to slide a table row down if mouse hovers over previous(one up) table row
<p>Only scrolls up on pageload so far and even then the animation is jittery
and ugly. I suspect it's something to do with me wanting to use this on tr element.    </p>

<pre><code>&lt;table&gt;

    &lt;tr class="ItemHeading"&gt;
    &lt;td&gt;ItemName&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr class="ItemDescription"&gt;
    &lt;td&gt;
    &lt;ul&gt;
    &lt;li&gt;Item spec&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/td&gt;
    &lt;/tr&gt;

    &lt;/table&gt;

    &lt;script type="text/javascript"&gt;



    $(".ItemDescription").slideUp(300);

        $(".ItemHeading").hover(function () {
            $(this).next("tr").slideDown(300);
        });


        $(".ItemHeading").mouseleave(function () {
            $(this).next("tr").slideUp(300);
        });

 //  $(document).ready(function() {  $(".ItemDescription").slideUp(300); } );
    &lt;/script&gt;
</code></pre>

<p>The below works fine, but it doesn't slide the table row up and down, just hides and shows. Provided
I set the .ItemDescription css display property to none.</p>

<pre><code>    $('.ItemHeading').hover(function () {
    $(this).next("tr").css("display", "block");
    $(this).mouseleave(function () { $(".ItemDescription").css("display", "none"); });

});
</code></pre>
