Animate Height and Direction of Slide Using jQuery

Introduction

This article explains how to animate the height and direction of a Slide using jQuery.

Many of you must have created a slider for showing images or some information to the user, but how about adding some more animation to your Slider?

Mainly we see that a Slider works only in one direction and at a specific height, if we want to change the direction of the slider in each slide then a new type of Slider will be created. Here I will show a sample for example or demo of how to create such an animation in your Slider. After that it's up to you to decide how you apply them in your Slider.

Step 1

First of all I created an application in .NET.

In this application I created two Divs that will be used to show the animation and a parent Div that will be holding these two Divs.

Write this code in your WebForm:

    <div class="mainBox">

    <div class="mainBox_content">

        <div class="firstBox"><a href="#" class="call_next">See Next</a>

        </div>

        <div class="secondBox"><a href="#" class="go_back">Go Back</a></div>

    </div>

</div>

Here mainBox, mainBox_content, firstBox, secondBox are classes created in CSS.

Step 2

Now we will work on the CSS that is one of the main parts of this application.

Write this code in the Head Section of your application:

    <style>

.mainBox {

    background-color:#ccc;

    width:500px;

}

 

.mainBox_content {

    width:80%;

    margin:0 auto;

}

 

.firstBox {

    width:100%;

    background-color:rgb(0, 143, 255);

    min-height:300px;

}

 

.secondBox {

    width:100%;

    background-color:rgb(255, 102, 0);

    min-height:500px;

    display:none;

}

    </style>

Step 3

Now it's time for the most important part of our application, to add jQuery.

You need to add jQuery-ui-1.10.3.js and jQuery-1.9.1.js to your application, you can either download them from the jQuery site or you can download the Zip file of this application provided at the start of the article and then can fetch jQuery files from it.

    <script src="jquery-1.9.1.js"></script>

    <script src="jquery-ui-1.10.3.js"></script>

Now we will create the following JavaScript functions for our application:

        <script>

            

            $(".call_next").click(function () {

                $(".firstBox").hide();

                $(".mainBox_content").animate({ height: '500px' }, 300, function () {

                    $(".secondBox").show('slide', { direction: 'right' }, 500);

                });

            });

 

            $(".go_back").click(function () {

                $(".secondBox").hide();

                $(".mainBox_content").animate({ height: '300px' }, 300, function () {

                    $(".firstBox").show('slide', { direction: 'left' }, 500);

                });

            });

    </script>

Here two functions are created, one that is working on the class "call_next" and the other that is working on the class "go_back". In both functions, whenever the click event occurrs the next class element will be called with a change in height and a different direction of slide.

Now our application is created and is ready to be executed.

Output

On running the application you will see an output window like this:

Now if you click on the link then a different Slider from a different direction will be seen.