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">«Move Left</button><button id="GoRight">»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.
Let me know your feed back after trying this feature in jQuery
2 comments:
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
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
Post a Comment