jQuery .animate() Custom CSS Animations

What Is .animate()?

.animate() (since jQuery 1.0) performs a custom animation of numeric CSS properties on matched elements. You pass a map of targets; jQuery tweens from the current values to those targets. Returns the jQuery object for chaining.

$("#box").animate({ width: "70%", opacity: 0.4 }, 1500);
$("#box").animate({ left: "+=50px" }, "slow");
$("#box").animate({ height: "toggle" }, { duration: 400, easing: "linear" });

// Numeric props only · does not auto-show hidden elements
// Queued by default · queue:false runs in parallel

How to Use .animate()

Select the element, pass a properties map, then optionally duration, easing, or an options object.

1. Select the target with jQuery ($("#box")).
2. If it may be hidden, call .show() first when you need it visible.
3. Call .animate({ prop: value, … }, duration) (or the options form).
4. Use += / -= for relative moves; "show" / "hide" / "toggle" for height, width, opacity, and similar.
5. Chain more .animate() calls to queue steps, or set queue: false for parallel runs.

Pseudocode

call $(elements).animate(properties, duration?, easing?, complete?)
  // or .animate(properties, options)

for each matched element:
    resolve relative values (+= / -=) from current CSS
    resolve show / hide / toggle keywords
    enqueue on fx (unless queue: false)

    each frame:
        tween every property toward its target
        if step provided: call step(now, fx)

    when finished:
        if complete provided: call complete (this = DOM element)

return the jQuery set for chaining

Cheat Sheet

Keep these facts handy while building custom animations.

Live Preview

Click Run to animate the sample box. Pick a preset, then reset to restore defaults.

Ready — click Run to animate.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("#go").on("click", function () {
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500);
});

Click → #block grows wider, fades, shifts, and enlarges text
Duration = 1500 ms · all properties tween together

$("#right").on("click", function () {
  $(".block").animate({ left: "+=50px" }, "slow");
});

$("#left").on("click", function () {
  $(".block").animate({ left: "-=50px" }, "slow");
});

» → left increases by 50px (moves right)
« → left decreases by 50px (moves left)
Fast clicks queue; each move waits for the previous

$("#go1").on("click", function () {
  $("#block1")
    .animate({ width: "90%" }, { queue: false, duration: 3000 })
    .animate({ fontSize: "24px" }, 1500)
    .animate({ borderRightWidth: "15px" }, 1500);
});

$("#go2").on("click", function () {
  $("#block2")
    .animate({ width: "90%" }, 1000)
    .animate({ fontSize: "24px" }, 1000)
    .animate({ borderLeftWidth: "15px" }, 1000);
});

Block1 → width runs now; fontSize/border still queue after current fx
Block2 → width, then fontSize, then border — strictly serial

$("#go").on("click", function () {
  $(".block").css("left", 0);
  $(".block").first().animate({ left: 200 }, {
    duration: 1000,
    step: function (now) {
      $(".block").slice(1).css("left", now);
    }
  });
});

First block animates left → 200
Other blocks mirror left via step(now)
All four move together for 1000 ms

$("#run").on("click", function () {
  $("p").animate({
    height: "toggle",
    opacity: "toggle"
  }, "slow");
});

Click → paragraphs collapse/fade (or expand/fade in)
Second click reverses · duration = "slow" (600 ms)

Edge Cases & Pitfalls

Performance Notes

Small .animate() calls are fine for learning and simple UI. Prefer fewer properties, smaller sets, and stop-before-animate on interactive controls.

Key Takeaways