Back to Top

JQuery Animation effects

JQuery Animation Explained

jQuery is a JavaScript framework which intends to easily develop interactive websites and user interfaces with a few lines of code.jQuery animate is quite common and useful function to add animation functionality.

Let’s start from SYNTAX

Parameters in this function, properties parameter is mandatory and others are semi-optional which means you can use it as per your requirement.

Let’s learn the animate() function with a set of examples.

Step 1:

First of all,include the jQuery javascript library in < HEAD > tag of your file:

Here, I have included the latest version of jQuery core library.

Step 2:

Now, let’s place HTML code.I have developed a demo so you can easily understand the code.Place HTML code into the < BODY > tag.

Here, we are using a sample DIV tag with id box for animating.

Step 3:

Next is an important part, jQuery animate code and let me explain it one by one.

passing jQuery into anonymous functions that mean it gives the guarantee that $ will work for jQuery.

Next, Let’s see the code for Left animation of a box.

Above code will animate the box into the left can use same code for right direction by placing + rather than -.

Next, is about the top and bottom animation of a box which is same like the above but just the variable and parameter is different.

We can use an animate function for the effect also. so let’s see some more effect with the animate function like fade and cross.

Fade Effect:

For fade effect with animate function in jQuery, you need to place opacity into it.

Cross Effect:

For cross move effect with animate function in jQuery, you need to place both leftPos and topPos into it.


View Demo

Thanks for reading and feel free to share your thoughts, don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

Steps To speed up Eclipse IDE

Posted on 6 years ago


Disable updates for plugin in WordPress

Posted on 4 years ago


How to enable Debug Console in X-cart?

Posted on 5 years ago


How to Accordion Menu with Modx

Posted on 6 years ago