Well, it is our princess birthday and she has some pink balloons, lets help her in flying the balloons.

jQuery : This library is a bliss since it has been released, it is a larger framework which helps in avoiding large lines of code for an event to happen. It makes pages dynamic. It initializes, loads, manipulates DOM elements and  also does  uses AJAX to interact with server to get a information. Here we are going to use animate()  and callback()  functions to fly these balloons. But what are they.

jQuery can be downloaded and place it in the same folder of the HTML file or can be imported to a HTML file by using a link to its library like below:

animate(): This method helps in animating a set of selected elements. All these animations can be customized based on our interests. The syntax can be like:

.animate( properties [,Speed] [, callback function])

Properties: Based on which animation will move toeards (left, right, top, bottom)

Speed: How fast the animation can be done(Slow, fast). This can also be expressed in milliseconds too.

Callback Function(): jQuery’s beauty lies here, it allows to call a function within a function.

The jQuery code can be written within script tag or can be written in a .js file.

An example code is something like below.

In this context, we have animated the balloons to move towards bottom for 20px and 3000 is the duration for the animation. We are flying the balloons first towards bottom and then with call back function we are moving it towards left for 750px with 3000msec speed and again towards left for 250px in 2000msec.

The output is soemething like below:

The working of this code can be viewed here: https://jsfiddle.net/sirishagavini/xc4s2g18/