jQuery for Animation: animate() function With Example

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

Syntax for jQuery animate method

$(selector).animate({params},speed,callback);

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

Example of animated jQuery method

$("button").click(function(){
  $("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!

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

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});