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

4 comments:

Naviya Nair said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from .Net Core Training in Chennai. or learn thru .Net Core Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
or Es6 Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

pooja said...

Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us
Best Devops online Training
Online DevOps Certification Course - Gangboard

tamilsasi said...

After reading this web site I am very satisfied simply because this site is providing comprehensive knowledge for you to audience.
Thank you to the perform as well as discuss anything incredibly important in my opinion. We loose time waiting for your next article writing in addition to I beg one to get back to pay a visit to our website in



selenium training in Bangalore
selenium training in Marathahalli
selenium training in Btm layout
selenium training in Jaya nagar
selenium training in Electronic city
selenium training in Kalyan nagar



cathryn leno said...

Thanks for posting this info. I just want to let you know that I just check out your site and I find it very interesting and informative. I can't wait to read lots of your posts
python training in chennai
Python Online training in usa
python course institute in chennai