jQuery — Animate

Basic animate()

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

Multiple Properties

$("div").animate({
    left: "200px",
    top: "100px",
    opacity: 0.8
}, 1500);

Relative Values

// Use += or -= for relative changes
$("div").animate({
    left: "+=50px",
    top: "+=25px"
}, 500);

Queue Animations

$("div")
    .animate({ left: "200px" }, 500)
    .animate({ top: "100px" }, 500)
    .animate({ opacity: 0.5 }, 500);

Easing

$("div").animate(
    { left: "200px" },
    1000,
    "swing"  // "linear" or "swing"
);

stop() with Animations

$("div").click(function() {
    $(this).stop().animate({ left: "+=100px" }, 500);
});

Chaining with animate()

$("div")
    .animate({ width: "300px" }, 500)
    .animate({ height: "200px" }, 500)
    .animate({ opacity: 0.5 }, 500);

Animated Properties

Property	Animated?
width	Yes
height	Yes
left	Yes (positioned)
top	Yes (positioned)
opacity	Yes
font-size	Yes
color	No (use jQuery UI)
background-color	No (use jQuery UI)

Mini Practice

1. Animate an element's position
2. Chain multiple animations
3. Use relative values with +=
4. Stop an animation mid-way

Up Next

Continue with Stop — stopping animations gracefully.