jQuery animate: 6 Demos with div, circle, text and UI element

The animate method of jQuery

The jQuery animate method makes it quite easier to create animations in your web pages for different elements. Basically, animations are created for restricted numeric CSS properties that can be applied to elements like div, paragraphs, span etc. elements.

The animations created are light weight and smooth that otherwise need to use different tools or ways that are heavier for the web pages. So if you are using jQuery for other functions as well you do not need to include any other resource to create animations and overload can be reduced which is good for SEO as well.

The animate jQuery method requires a parameter which is CSS object. It also has other parameters like duration, easing etc. that are optional.

The simple syntax of $.animate method

$(selector).animate({css},duration, easing, complete);

Where you may use different selectors like HTML element (div, paragraphs, lists, etc), classes, ids, menus etc.

In this tutorial I am going to show how you can use the animate method in simple elements with different parameters as well as jQuery UI widgets.

A simple example of an animation

In this example, I will animate a div element which is styled with CSS. The code includes jQuery and jQuery UI libraries as I will use effects for animation. As you click on “Run animation” button, the circle which is a div element will animate with duration of 5 seconds (5000 milliseconds). I used specialEasing property where I have specified effects for height and width.

After the animation is completed, an alert will be shown which is placed in complete function of $.animate method. The complete function executes after the animation is completed.

See online demo and code

The jQuery code:

See the complete clode, including CSS and markup in the demo page.

Animation example with jQuery UI accordion widget

In this example, I will create an accordion by using jQuery accordion plugin. The accordion contains three tabs. After that, there  is a button to open and close accordion with animation. As you press the button, the accordion will be closed by using the jQuery animate method. Once animation is completed, press the button again to open accordion panels by animation.

In animation, I again used effects in height and width of main div. I have also used duration and complete parameters of animate method to specify how long animation should be completed and to let the user know as animation is completed  by showing an alert.

See online demo and code

Following is the code used for animation in the <script> of head section:

An animation example of text and size

In this example, the size of the div element along with text size will be increased by using the animate method of jQuery. A div element is created with a few CSS properties. While animate method also uses CSS properties that will be changed by given time.

Note that, you can use many CSS properties in the animate method, however, you have to use property names by camel-case.

For example, padding-right can be used as paddingRight in the animate jQuery method and so on.

One other thing to be noted is you can animate colors by using Color animation plugin. By simply using jQuery library color would not be animated, for example, backgroundColor.

See online demo and code

This jQuery code for that example is:

See the complete code in the demo page.

Running two animations simultaneously example

In this example of jQuery animation, I will use the animate method to run two animations at the same time. For that, I have two div elements with different styles, the smaller is inside the larger div.

As you press the “Run animation” button, the animations will be started by given effects. I have used two for loops in that example. The first outer loop is for parent div that will run only once, while inner div, which is a circle will run five times during that period.

Have a look at demo by clicking the link or image below:

See online demo and code

jQuery animate color example

As mentioned in above section, you can animate colors by using the color plugin. If you have included jQuery UI library then you are done. However, if you need to use only color animation by using jQuery animate method then you may consider to download only required plugin rather full library. To customize your download go to this link and select what is required: http://jqueryui.com/download/

In the example, I have created a div with border-radius property. The initial color is kept yellowish and as you click on start animation button it will be changed to greenish.

See online demo and code

As you can see the color is changing along with text from larger to smaller size. I used line-height property to push the text a bit down.

A continuous animation example

Until now we have looked at different animations that you m ay start by a button and if it is toggled you can press it again to repeat the animation. Sometimes you need to keep on running animation continuously. You can handle that programmatically in jQuery in different ways. One of the ways is shown below in the demo of animate method.

First have a look at the continuous animation by clicking the link below or image and then a little description to do it yourself..

See online demo and code

So what the code is doing? Basically I put all code of the $.animate method in a custom function animateex. As you click on the button “Run animation” this function is called. As animation is completed after duration parameter, I called another function animateback that is given initial CSS properties inside the jQuery animate method.

This function will take div back to its original position and as it ends it again calls first function, animateex and the process goes on.