? What is .animate() in jQuery?

The .animate() method is used to create custom animations by changing CSS properties over time.

? Syntax

javascript
$(selector).<div "#go").click(function() {    $("#box").animate({      width: "300px",      height: "150px"    }, 1000); // 1000ms = 1 second  });</script>

? Example 2: Move a Box (Left Margin)

javascript
$("#box").animate({  marginLeft: "200px"}, 800);

? Example 3: Chain Multiple Animations

javascript
$("#box").animate({ height: "150px" }, 500)         .animate({ width: "300px" }, 500)         .animate({ opacity: 0.5 }, 500);

?? Notes

• .animate() works with numeric CSS properties only like:

  • width, height, opacity, margin, padding, left, top, etc.

• It doesn't work with background-color unless you use jQuery plugins (like jQuery UI).

? Easing Types

• "swing" (default): starts slow, speeds up, then slows down

• "linear": constant speed

You can also add custom easings using jQuery UI.

? Callback Function Example

javascript
$("#box").animate({ height: "200px" }, 500, function() {  alert("Animation done!");});

? Use Cases

• Smooth drop-down menus

• Expand/collapse panels

• Loading animations

• Attention-grabbing UI effects