jQuery Effects Using Slide Methods

This article explains how to slide methods of jQuery to show and hide an element of a web page. These slide methods do the up and down element. Before going into detail in this article I want to share my article's links that explain jQuery slider.

1. Sliders in jQuery

2. jQuery Slider Examples

The jQuery Slide methods slide elements up and down. To implement slide up and down on element jQuery there are the three methods:

• slideDown()

• slideUp()

• lideToggle()

Before going into detail of each method we create an example that demonstrates each method one by one.

Add our jQuery and cascading style sheet reference on the web form:

<link href="CSS/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

 I directly use the Google Ajax Libraries content delivery network to serve jQuery from Google and separate Cascading Style Sheet (style.css).

Now create a UI Design with three buttons (slideDown, slideUp and slideToggle) as per three jQuery slide methods and use div as an element that moves up and down by jQuery slide methods on button click.

  <asp:Button ID="btnSlideDown" runat="server" Text="Slide Down" />
     <asp:Button ID="btnSlideUp" runat="server" Text="Slide Up" />
     <asp:Button ID="btnSlideToggle" runat="server" Text="Slide Toggle" />
    <div id="login_wrapper">  
        <div id="login">                                 
            <div class="labelContainer">  Your Name : </div>
            <div class="valueContainer">
                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            </div>

            <div class="clearStyle"></div>
               
            <div class="labelContainer">Email :</div>
            <div class="valueContainer">
                <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
            </div>

            <div class="clearStyle"></div>
                           <div class="labelContainer">Password :</div>
            <div class="valueContainer">
                <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
            </div>

            <div class="clearStyle"></div>

            <div class="buttonLayout">
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
        </div>
    </div> 

Now we have added the jQuery library, CSS references and created a registration form.

We define a .click() event of each server side button in JavaScript. If we create a button click event on the head tag of a page then we need to write code in:

$(document).ready(function ()
        {
        });

Because our page should be fully loaded before firing any event. If we write JavaScript code at the end of the page then we don't need to define it. One more thing is that each function will return false that means our server side button won't postback page on its click event.

Now we will go into detail of each method for jQuery sliding. All jQuery slide methods have a common syntax as in the following:

$(selector).slideMethod(speed, callback);      

This method has two parameters, one is speed and another is callback.

The speed parameter has some values that are related to the speed of the element during up and down. We can use "fast", "slow" or milliseconds for element speed.

The callback is a function that executes after the completed the slide method.

1. slideDown() Method

This function is used to slide and hide an element on down side:

<script type="text/javascript">
        $(document).ready(function ()
        {
            $("#btnSlideDown").click(function ()
            {
                $("#login_wrapper").slideDown();
                return false;
            });
        });
        </script>

2. slideUp() Method

This function is used to slide an show element up side:

<script type="text/javascript">
        $(document).ready(function ()
        {
            $("#btnSlideUp").click(function ()
            {
                $("#login_wrapper").slideUp();
                return false;
            }); 
        });
        </script>

3. slideToggle() Method 

This method is between slideUp() method and slideDown() method. It shows/hides an element in up/down side:

<script type="text/javascript">
          $(document).ready(function ()
          {              $("#btnSlideToggle").click(function ()
              {
                  $("#login_wrapper").slideToggle();
                  return false;
              });
          });
        </script>

You can get the full source code from the zip file so download it and become familier with the slide methods in jQuery.

Reference

W3Schools.com