Web Animation Using jQuery

jQuery is the most popular JavaScript library used on the web. As newer front-end frameworks arrives and becomes popular, some think jQuery is old style and does not meet the current web’s requirements. However, in my opinion, jQuery is still valuable and should be used in some situations. Animations may be one of those.

jQuery has the built-in animation() function to animate different properties of HTML elements on the web as shown in the following code. One thing to be noted is that the non-numeric property values can not be animated, such as backgroundColor.

$('#element').animate({
    width: "400px",
    height: "300px",
    left: "400px"
}, 2000, "swing")

jQuery has also other functions with similar animation effects, such as fadeIn(), fadeOut(), slideDown(), slideUp(), etc..

Besides, there are a lot of jQuery plugins with animation effects. To name just a few:

• jQueryUI for making tabs, accordions and other UI elementswebsite
• jQuery-cycle2 for carousels and slide showswebsite
• fresco for making beautiful lightboxeswebsite
• waypoints for triggering elements when scrolling the scroll barwebsite
• Stellar for creating parallax effectwebsite

A fairely complete but not exhausted list of animation related jQuery plugins is on this websiteanimation taged jQuery plugins