How to Sliding Up and Down with Speed Effect a DIV using JQuery in Asp.Net C# VB.Net

To make a better or intuitive user interface we need to implement Sliding Up or Sliding Down or even both at a time. Here in this example I will use a DIV to Slide Up & Down from Client side script like JQuery. The slideUp() method slides-up or hides the selected elements where as the slideDown() method slides-down or shows the selected elements.

Basic Syntax of JQuery slideUp() method:

$(selector).slideUp(speed,easing,callback)

Basic Syntax of JQuery slideDown() method:

$(selector).slideDown(speed,easing,callback)

Note: Speed parameter is optional & used to Specify the speed of the slide effect. Easing parameter is also optional & Specify the speed of the element in different points of the slide. Probable values are “swing” & “linear”. Default value is “swing”. Callback parameter is optional & not so much important. Specially required if you want to run a code block after sliding up or down.

Objective/Outcome:
How to Sliding Up and Down a DIV using JQuery - Asp.Net Csharp VB.Net

HTML DIV to do the Example:

    <table>
    <tr><td>
    <div id="slidingDiv" style="background-color:Red;font-weight:bold;width:100%;height:200px;color:White;">
    This ia a test<br />
    This ia a test<br />
    This ia a test<br />
    This ia a test<br />
    This ia a test<br />
    This ia a test<br />
    This ia a test<br />
    This ia a test<br />
    </div>
    </td>
    </tr>
    <tr><td>
    <asp:Button ID="Button1" runat="server" Text="Slide Up the DIV" />
    <asp:Button ID="Button2" runat="server" Text="Slide Down the DIV" />
    </td>
    </tr>
    </table>

JQuery Code Example to SlidingUp & SlidingDown a DIV:

    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%=Button1.ClientID %>').click(function () {
                $("#slidingDiv").slideUp(1000);
                return false;
            });

            $('#<%=Button2.ClientID %>').click(function () {
                $("#slidingDiv").slideDown(1000);
                return false;
            });
        });  
    </script>

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, JQuery, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code
     
 

*