如何在显示隐藏元素时在 JQuery 中制作幻灯片动画

How to make slide animation in JQuery when show hide elements

本文关键字：幻灯片动画 JQuery 显示隐藏元素更新时间：2023-09-26

我有这个asp和HTML代码：

 <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代码：

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

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

当使用类切换Row的batten单击上面的Jquery函数时，将触发定义为隐藏的行，并隐藏包含类点DescArea的行。

我的问题是如何将上面的 Jquery 行更改为使用动画幻灯片左侧。（即在消失（隐藏）时，元素将向左滑动，而在出现（显示）时，它将从右向左移动）。

知道我该如何实现它吗？

$.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;
});

或者你直接做

$('.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;
});