如何将 animation 添加到此 javascript 显示/隐藏 function？

Question

I am using Javascript to show/hide a nested gridview (to show some details) inside a main gridview like so:

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>

and the 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>

So, this works fine, but what code is needed to add animation to the show/hide for smoother effect? Thank You!

Answer 1

jQuery is your friend: http://api.jquery.com/animate/

basically (with jQuery installed) you'd do something like:

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

I've added 2 classes to your table, since it's easier to apply the client side code to all the elements at one time based on a class name.

Here is the JavaScript / jQuery Code to Hide/Show the Div and Change the text from "Show Details" to "Hide Details".

<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>

Here is your modified GridView with the classes added. It doesn't seem like anything is being done with the ID on the /, so you could remove those if they are not needed for something else.

<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>