Monday, March 25, 2013

How to do animation in .NET using jQuery

In general everybody likes animation. Earlier animation in a page was a difficult tasks. Now after jQuery library animation can be done using two lines of code.

In this article I am going to explain you how to do animation in a webpage using jQuery.

First you have to download the jQuery library. Use the jQuery download page to download the library. If you don’t wanted to download you can add the reference directly as well. Here in this article I am directly referring the jQuery library.

Now we will see the complete code used for animation. I have tried to explain most of the details in the code itself and rest of the codes are self explanatory.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Animations.aspx.cs" Inherits="Sample_2012_Web_App.CustomerDetails" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Animation Sample</title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
<body>
    <button id="GoLeft">&laquo;Move Left</button>
    <button id="GoRight">&raquo;Move Right</button>
    <div class="block" style="position:absolute;background-color:#f00;left:100px;width:200px;height:100px;margin:20px;">This box is going to Animate</div>
    <script>
        $("#GoRight").click(function () {
            $(".block")
            .animate({ "left": "+=100px" }, "slow")//This code will move the box Right.
            .animate({ "height": "250px" }, 500)//This code will increase the height.
            .animate({ "width": "250px" }, 500)//This code will increase the width.
            .animate({ "opacity": "0.15" }, "slow")//This code will reduce the Opacity.
            .animate({ "opacity": "1" }, "slow")//This code will increase the Opacity.
            .animate({ "height": "100px" }, 500)//This code will reduce the increased height.
            .animate({ "width": "100px" }, 500);//This cide will reduce the increased width.
        });
        $("#GoLeft").click(function () {
            $(".block")
            .animate({ "left": "-=100px" }, "slow")
            .animate({ "height": "250px" }, 500)//This code will increase the height.
            .animate({ "width": "250px" }, 500)//This code will increase the width.
            .animate({ "opacity": "0.15" }, "slow")//This code will reduce the Opacity.
            .animate({ "opacity": "1" }, "slow")//This code will increase the Opacity.
            .animate({ "height": "100px" }, 500)//This code will reduce the increased height.
            .animate({ "width": "100px" }, 500);//This cide will reduce the increased width.
        });
</script>
</body>
</html>

When you look at the code you can see that I have written many animate code on click of the button. Actually that is the beauty of jQuery. Add as many animation code and make it interesting.

There are many more animation options available but I have limited here with 6 or 7 options.

Below is the interface I have created for animation.

Animation using jQuery

Let me know your feed back after trying this feature in jQuery