What does the jQuery `.animate()` function do?
A
Adds a new HTML element
B
Changes CSS properties over time
C
Executes an AJAX request
D
Removes an element from the DOM
Analysis & Theory
`.animate()` is used to **create custom animations by changing CSS properties gradually over time**.
Which of the following is a correct use of `.animate()`?
A
$('#box').animate({width: '200px'}, 1000);
B
$('#box').animate(width: '200px', 1000);
C
$('#box').animate('width:200px', speed:1000);
D
$('#box').animate(1000, {width: '200px'});
Analysis & Theory
Correct syntax: `.animate({properties}, duration)` – here, **`width` is animated over 1000ms**.
Which property **cannot** be animated with jQuery `.animate()` by default?
Analysis & Theory
By default, **`color` is not supported** in `.animate()` unless you use a plugin like jQuery UI.
What does the second parameter in `.animate()` represent?
C
Animation duration in milliseconds
Analysis & Theory
The **second parameter is the duration** in milliseconds that the animation should take.
What will the following code do?
`$('#box').animate({left: '+=50px'}, 500);`
A
Move the box 50px to the left instantly
B
Move the box to 50px from the left
C
Move the box 50px to the right over 500ms
D
Change the box width to 50px
Analysis & Theory
`'+=50px'` **moves the element 50px to the right**, and `500` is the animation time.
How can you run a function after `.animate()` completes?
C
By chaining a callback as the third parameter
Analysis & Theory
You can pass a **callback function as the third parameter** to `.animate()`.
Which is the correct syntax to animate both `width` and `height`?
A
$('#box').animate('width:200px, height:100px');
B
$('#box').animate({width:'200px', height:'100px'});
C
$('#box').animate(width='200px', height='100px');
D
$('#box').animate([width:'200px', height:'100px']);
Analysis & Theory
To animate multiple properties, use an **object**: `{width: '200px', height: '100px'}`.
What will `$('#box').stop().animate(...);` do?
B
Stop current and queued animations before starting new one
D
Delay the animation start
Analysis & Theory
`stop()` **halts current/queued animations**, preventing overlap before starting new `.animate()`.
What does `easing` in `.animate()` control?
C
Timing function of animation
D
Event handling during animation
Analysis & Theory
**Easing controls** the rate/speed curve of the animation (e.g., `linear`, `swing`).
Which plugin extends `.animate()` to support color animations?
Analysis & Theory
`jQuery Color` plugin adds support for **animating colors** using `.animate()`.