Question

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.

<table>

    <tr class="ItemHeading">
    <td>ItemName</td>
    </tr>

    <tr class="ItemDescription">
    <td>
    <ul>
    <li>Item spec</li>
    </ul>
    </td>
    </tr>

    </table>

    <script type="text/javascript">



    $(".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); } );
    </script>

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.

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

});

Answer 1

I would strongly suggest against tables with animations. It’s just not going to give you the results you’re looking for.

Also, you’re using closest incorrectly. closest will go up the DOM to find the “closest” parent that matches the provided selector. You’re looking for next which will select the following row.

html:

<div class="table">

    <div class="tr ItemHeading">
        <div class="td">ItemName</div>
    </div>

    <div class="tr ItemDescription">
        <div class="td">
            <ul>
                <li>Item spec</li>
            </ul>
        </div>
    </div>

</div>

jQuery:

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

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

Working example here: http://jsfiddle.net/VKBYy/1/