jQuery Animation step by step tutorial guide

Last updated on Aug 02, 2016

Alphanso Tech

jQuery / JS


JQuery Animation

jQuery is a fast and concise JavaScript library that simplifies the development of cross-browser applications.

In this blog we are focusing on jQuery animation.Animation is the technique of photographing successive drawings or positions of puppets or models to create an illusion of movement when the film is shown as a sequence.

jQuery animation (.animate()) function is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple. First lets check the syntax of this function.

In this blog we are discussing about some basic functions and uses of jQuery animate() function.

Let’s consider and example of Image auto Zooom In/Out by jquery animate.


To get more examples of animations and know more ,please visit our blogs regularly,we will back with more examples soon. Thank you

Let’s consider the another example of jQuery animation effects.

Expand and Shrink Textbox on focus and blur event

It’s quite easy and very straight forward.

Create some Textboxes

In,above textboxes we have taken a class named “at_expand”, We will bind unobtrusive jquery event on this class.

Note : Don’t forget to include jquery.min.js


Collapse content by applying animation effect


[sociallocker]Download the complete code

Live demo of jQuery animation example



I hope you will find this post very useful regarding jQuery Animation. Let me know any questions if you have in comment regarding jQuery. I will reply you ASAP.

Have you got cool idea about Web Application development or WordPress Development? Contact us Now to get free consultation on your idea. Alphanso Tech is rated as one of the best Web Development Company in India.


Post by Alphanso Tech

Created in 2009, Alphanso Tech is a leading IT Consulting company with a presence in the USA, Canada, and India.We are a trusted and leading service provider to many top-tier companies in the area of Custom WordPress Development , Web Application Development , iOS App Development , Outsourcing Services, Online Marketing and many other related activities.

4 Responses to jQuery Animation step by step tutorial guide

  1. Pingback: Collapse content by jQuery animation | Coding Tutes

  2. Pingback: Jquery Drag and Drop Tutorial | step by step tutorial guide

  3. Pingback: jQuery fadein - fadeout tutorials with examples

  4. Pingback: jQuery navigation menu examples | step by step tutorial guide

Leave a Reply

Your email address will not be published. Required fields are marked *