jQuery Tutorial

jQuery for Animation: animate() function With Example

jQuery animate() Method

Use the jQuery animate() function to create custom animations.

Syntax for jQuery animate method


The needed params parameter specifies the animated CSS properties.

The duration of the effect is determined by the speed parameter, which is optional. It has three possible values: "slow", "rapid", or milliseconds.

The optional callback parameter specifies a function that will run once the animation has finished.

The animation() method is demonstrated in the following example, which moves a

element to the right until it reaches a left property of 250px:

Example of animated jQuery method

  $("div").animate({left: '250px'});

BY default, all HTML elements have a fixed location and cannot be moved.

Remember to set the CSS position property of the element to a relative, fixed, or absolute before manipulating the position!

Manipulating Multiple Properties in jQuery

It's worth noting that you can animate many properties at the same time:

    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
Did you find this article helpful?