How to make slide animation in JQuery when show hide elements

Question

I have this asp and HTML code:

 <asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False">
        <ItemTemplate>
            <div class="row1">
                <table style="cursor: pointer; width: 100%">
                    <tr>
                        <td rowspan="4">
                            <asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32"
                                Height="32" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td rowspan="7">
                             <input type="button" class="toggleRow" value="B" style="height: 30px; position: relative; float: left;" />
                        </td>
                    </tr>
                    <tr>
                        <td>text:</td>
                        <td rowspan="4">
                            <h1 style="color: gray"><%# Eval("Text") %></h1>
                        </td>
                    </tr>
                    <tr class="hidden">
                        <td>text:</td>
                        <td><%# Eval("Text") %></td>
                    </tr>
                    <tr class="hidden">
                        <td>X:</td>
                        <td><%# Eval("Lon") %></td>
                    </tr>
                    <tr class="hidden">
                        <td>Y:</td>
                        <td><%# Eval("Lat") %></td>
                    </tr>
                    <tr>
                </table>
            </div>
        </ItemTemplate>      
    </asp:Repeater>

Javascript code:

        $('.toggleRow').on('click', function () {


            $(this).closest('table').find('tr.pointDescArea').hide(300);
            $(this).closest('table').find('tr.hidden').show(1000);

            return false;
        });

When batten with class toggleRow clicked the Jquery function above fired and row that defined as hidden is showed and row that contain class pointDescArea is hided.

My question is how can I change the Jquery rows above to use animation slide left.(i.e while disappearing(hide), the element will be sliding left, and while appearing(show), it will be moving from right to left).

Any idea how can I implement it?

Can you share the generated html instead of server side template — Arun P Johny, Feb 26 '16 at 08:05
http://stackoverflow.com/questions/467336/how-to-use-slidedown-or-show-function-on-a-table-row — Arun P Johny, Feb 26 '16 at 08:06

score 0 · Answer 1 · answered Feb 26 '16 at 15:11

$.fx.speeds.slow = 1500;        // 1.5 sec
$('.toggleRow').on('click', function () {
    $(this).closest('table').find('tr.pointDescArea').fadeOut('slow');
    $(this).closest('table').find('tr.hidden').fadeIn('slow');
    return false;
});

or you do it directly

$('.toggleRow').on('click', function () {
    $(this).closest('table').find('tr.pointDescArea').fadeOut(1500);
    $(this).closest('table').find('tr.hidden').fadeIn(1500);    //where 1500 is 1,5 sec
    return false;
});

How to make slide animation in JQuery when show hide elements

1 Answers1