如何將 animation 添加到此 javascript 顯示/隱藏 function？

Question

我正在使用 Javascript 顯示/隱藏主 gridview 內的嵌套 gridview （顯示一些細節），如下所示：

Gridview：

<asp:GridView ID="GridView1" runat="server"   DataKeyNames="ResID" 
        onrowdatabound="GridView1_RowDataBound"  DataSourceID="SqlDataSource1" > 
        <Columns>
           <asp:TemplateField>
            <ItemTemplate>
            <a href="javascript:switchViews('div<%# Eval("ResID") %>', 'one');">Details</a>
                  </ItemTemplate>
          </asp:TemplateField>            

            <asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:M/d/yyyy}" SortExpression="Date" />
            <asp:BoundField DataField="Name"  HeaderText="Name" SortExpression="Name" />
            <asp:BoundField DataField="Contact"  HeaderText="Contact" SortExpression="Contact" />
            <asp:BoundField DataField="Response" HeaderText="Response" SortExpression="Response"/>
                      <asp:TemplateField>
                             <ItemTemplate>
                                       </td></tr>  
                                           <tr>    
                                              <td colspan="100%" style="padding-left: 25px;padding-top: 5px" >                     

                                     <div id="div<%# Eval("ResID") %>" style="display:none;  left: 30px;" >
                                           <!--nested Grid:-->
                                                  <asp:GridView ID="GridView2" runat="server"   AutoGenerateColumns="false"  DataKeyNames="ResID" >
                                                     <Columns>
                                                     <asp:BoundField DataField="iDate" DataFormatString="{0:M/d/yyyy}" HeaderText="iDate" HeaderStyle-Font-Bold="false"/>
                                                     <asp:BoundField DataField="iContact"  HeaderText="Contact" HeaderStyle-Font-Bold="false" />
                                                     <asp:BoundField DataField="iComments" HeaderText="Comments"  HeaderStyle-Font-Bold="false" />
                                                  </Columns>
                                                 </asp:GridView>
                                               <p></p>
                                 </div>

                                     </td>
                                     </tr>                    
                             </ItemTemplate>
                        </asp:TemplateField>

     </Columns>

和 Javascript：

<script type="text/javascript">

function switchViews(obj, row) {

var div = document.getElementById(obj);

if (div.style.display == "none")
     {
         div.style.display = "inline";

     }
     else
      {
         div.style.display = "none";
      }
 }
</script>

所以，這很好用，但是需要什么代碼才能將 animation 添加到顯示/隱藏中以獲得更平滑的效果？ 謝謝你！

Answer 1

jQuery 是你的朋友： http://api.jquery.com/animate/

基本上（安裝了 jQuery）你會做類似的事情：

function switchViews(obj, row) {
    var div = $('#'+obj),
        targetOpacity = div.css('opacity') === '1' ? 0 : 1,
        startOpacity = +!targetOpacity;
    div
    .stop()
    .css('opacity', startOpacity)
    .animate({opacity: targetOpacity}, 1000);
}

Answer 2

我在您的表中添加了 2 個類，因為基於 class 名稱一次將客戶端代碼應用於所有元素更容易。

這是 JavaScript / jQuery 代碼，用於隱藏/顯示 Div 並將文本從“顯示詳細信息”更改為“隱藏詳細信息”。

<script type="text/javascript">
    $(document).ready(function () {
        $('.showDetails').click(function () {
            // Show Details DIV
            $(this).closest('tr').find('.details').toggle('fast');
            // Return false to disable default postback on click of a <a> element
            return false;
        }).toggle(
            function () {
                // Trigger text/html to toggle to when hiding.
                $(this).html('Hide Details').stop();
            },
            function () {
                // Trigger text/html to toggle to when showing.
                $(this).html('Show Details').stop();
            }
        );
    });
</script>

這是添加了類的修改后的 GridView。 似乎沒有對 / 上的 ID 進行任何操作，因此如果其他內容不需要它們，您可以刪除它們。

<asp:GridView ID="GridView1" runat="server" DataKeyNames="ResID" OnRowDataBound="GridView1_RowDataBound" DataSourceID="SqlDataSource1">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <a class="showDetails" href="javascript:switchViews('div<%# Eval("ResID") %>', 'one');">Show Details</a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:M/d/yyyy}" SortExpression="Date" />
        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
        <asp:BoundField DataField="Contact" HeaderText="Contact" SortExpression="Contact" />
        <asp:BoundField DataField="Response" HeaderText="Response" SortExpression="Response" />
        <asp:TemplateField>
            <ItemTemplate>
                </td></tr>
                <tr>
                    <td colspan="100%" style="padding-left: 25px; padding-top: 5px">
                        <div class="details" id="div<%# Eval("ResID") %>" style="display: none; left: 30px;">
                            <!--nested Grid:-->
                            <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" DataKeyNames="ResID">
                                <Columns>
                                    <asp:BoundField DataField="iDate" DataFormatString="{0:M/d/yyyy}" HeaderText="iDate" HeaderStyle-Font-Bold="false" />
                                    <asp:BoundField DataField="iContact" HeaderText="Contact" HeaderStyle-Font-Bold="false" />
                                    <asp:BoundField DataField="iComments" HeaderText="Comments" HeaderStyle-Font-Bold="false" />
                                </Columns>
                            </asp:GridView>
                            <p>
                            </p>
                        </div>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>