Home PHP JavaScript CSS WordPress APIs .htaccess Other How-To Useful Scripts What I Recommend
Posted on by Aleksandar Gichevski ()
jQuery animate() function is powerful method for performing animation to a given html object. With using this function and combination of CSS rules you are able to create nice effects on your website where the value of CSS rules is changed gradually. Notice: With animate() function you can animate only numeric values exp. (width:200px; or margin:30px;). String values can’t be animated and won’t create any effect.

Animate() Syntax



Below is information about the parameters used in this function Let’s show some examples with animate() function. First what we need to do is include jQuery Library in our html file in the HEAD section.

Below code is example of our html file that is used.

This is example div.

Width Animation

Example of Width Animation

Height Animation

Example of Height Animation

Opacity Animation

For opacity we use little different html code in order to show you best result.

This is example div.
And here is the jQuery code for opacity animation.
Example of Opacity Animation These are only few basic examples to show you the power of jQuery animate() function. With combining more ‘animate’ executions and css rules you can create variety of effects that will make your website look nicer, interesting and user friendly.

Other Posts You Might Like

Get a fast, free website audit

Enter your URL below to get full in-depth SEO report and tips.

Useful Scripts

Most Popular Posts

Recent Posts

June 14th, 2014
Website Optimization Using Gzip Compression

June 10th, 2014
Google Search AutoComplete API

May 14th, 2014
What is a Tag Cloud and How to Calculate it by Formula

March 27th, 2014
Error writing file /tmp (errcode 28) Solved!

February 15th, 2014
Fixed CSS & HTML Navigation Bar

February 9th, 2014
Benchmark Your Server (CPU, File IO, MySQL) with SysBench

February 8th, 2014
JavaScript Array Basics

January 29th, 2014

January 25th, 2014
Payoneer Debit Card for Freelancers to receive money online

January 24th, 2014
How HTML Color Codes are generated?

Read Latest Posts directly on Facebook