CODEWITHSUNDEEP
javascriptjquery
LaserBeak
LaserBeak

Reputation: 3285

Need help to form Jquery to slide a table row down if mouse hovers over previous(one up) table row

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"); });

});

Upvotes: 0

Views: 941

Answers (1)

jhoff
jhoff

Reputation: 716

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/

Upvotes: 1

Related Questions