jQuery Animate

Posted on

Jquery animate :

Jquery introduce animation which make pages more interactive and user friendly. With use of animate() we can develop the animation web page. Today all most every website we are use the animation like in flipkart.com we can see the notification by click on the notification button which is display on the right hand side and it show the box where we can see window with notifications. Its very easy to develop we have to just write the animate function and the value which kind of effect we want.

Syntax is:

$(“#id or .class”).animate({properties:”value” },speed);

Eg.

$(“#notif”).animate({height:”200px”},1000);

Here we are use notif as id and we use the animation function which is define in jquery library and we set the property height of div and value is 200px and set the speed 1000 milliseconds it can be slow or fast as our requirement.

We can also set the multiple properties like Eg.

$(“#bn”).click(function(){

$(“#dd”).animate({

Left:”200px”,

Opacity:”.4”,

Height:”200px”

});

});

We can create more interactive pages and things with the help of the animations. There is some more function which is use to control the animations like stop function.

Stop():- stop function is use to stop the animate where we want to stop the animate we have to just run the stop function and stop the animation.

Eg.

$(“#ss”).click(function(){

#(“#pann”).stop();

});

Some notification example :

$(document).ready(function(){

$(“#Notification”).click(function(){

//alert(“alert”);

$(“#Notification”).animate({right:”550px”});

$(“#notit”).animate({width:”553px”,right:”550px”},1000);

$(“#notit”).show();

$(“#notit”).animate({top:”100px”,height:”600px”});

});

});

In this example first notification click by the user and it move 550 px right and then its width 553 px and move right side 550 px with speed of 1000 and it show the notift window where we can see the notifications and then its move top 100px and height 600px then it shows the notification window with notification we can also close the notification division and write the program reveres order.

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.

Helpline: 9814666333, 8699444666

Email:info@technocampus.co.in

**************************************************************************************************************

Please fill the FORM and we shall contact you soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s