jQuery - jQuery’s animate()

Ever wanted to move things around on your webpage? Make them grow, shrink, or slide diagonally? With jQuery’s animate() function, you can create custom animations that look fun and interactive.

What is animate()?

animate() lets you change the CSS properties of an element over time. For example, you can:

  • Move an element to the right

  • Resize it

  • Change its opacity

  • Or do all of those at once—smoothly!

 Basic Syntax

$(selector).animate({ properties }, speed);

  • selector – the element you want to animate

  • properties – the CSS properties you want to change

  • speed – how fast the animation happens (like "slow", "fast", or in milliseconds)

 Example: Move a Box to the Right

When you click the button, the box slides 250px to the right!

Note: You must set position: relative or absolute on the element to move it.

Animate Multiple Properties

$("#box").animate({
  left: '250px',
  height: '150px',
  width: '150px',
  opacity: 0.5
}, 1500);

This will move the box, make it larger, and fade it out—all in 1.5 seconds!

 Chaining Animations

You can even run multiple animations one after another:

$("#box").animate({ left: '200px' }, 1000)
         .animate({ top: '100px' }, 1000);

The box first moves right, then down.