jQuery Effects – Animation
What is Animation in jQuery?
The jQuery animate() method allows you to create custom animations by changing the CSS properties of an element gradually over time.
Why Use jQuery Animation?
✅ Custom animations – Move, resize, or change colors smoothly.
✅ Better than CSS transitions – More control over animation speed and behavior.
✅ Simple and easy to use – No complex JavaScript required.
The animate() Method
The animate() method lets you change CSS properties (such as size, position, opacity, etc.) over a given duration.
Syntax:
$(selector).animate({ properties }, speed, callback);
| Parameter | Description |
|---|---|
| { properties } | The CSS properties you want to animate. |
| speed | “slow”, “fast”, or milliseconds (e.g., 1000 for 1 second). |
| callback | (Optional) A function to execute after the animation completes. |
Examples of jQuery Animation
1. Animate Width and Height
👉 Example: Increase the width and height of a div when a button is clicked.
$(“#animateBtn”).click(function() {
$(“#box”).animate({
width: “300px”,
height: “200px”
}, “slow”);
});
📌 What happens?
• When the button is clicked, the #box grows in size smoothly.
2. Animate Multiple Properties at Once
You can animate multiple CSS properties together.
👉 Example: Change the width, height, and opacity of a div.
$(“#animateBtn”).click(function() {
$(“#box”).animate({
width: “300px”,
height: “200px”,
opacity: 0.5
}, 1000);
});
📌 What happens?
• The #box expands and becomes semi-transparent in 1 second
3. Animate Position (Move an Element)
You can move elements using left or top properties.
👉 Example: Move a div to the right.
$(“#moveRightBtn”).click(function() {
$(“#box”).animate({
left: “200px”
}, “slow”);
});
📌 What happens?
• The #box moves 200px to the right smoothly.
📌 Tip: The element must have position: relative; or absolute; in CSS for left and top to work.
4. Create a Toggle Animation
You can toggle an animation using a button click.
👉 Example: Increase the height on the first click and reduce it on the next.
$(“#toggleSizeBtn”).click(function() {
$(“#box”).animate({
height: “toggle”
}, “slow”);
});
📌 What happens?
• Clicking the button expands or collapses the #box.
Animate with a Callback Function
You can execute a function after an animation completes using a callback.
👉 Example: Show an alert after a div expands.
$(“#animateBtn”).click(function() {
$(“#box”).animate({
width: “300px”,
height: “200px”
}, 1000, function() {
alert(“Animation complete!”);
});
});
📌 What happens?
• The #box expands, and after 1 second, an alert appears saying Animation complete!
Conclusion
🎯 The animate() method is used to create custom animations.
🎯 You can change multiple CSS properties (width, height, opacity, etc.).
🎯 The callback function runs after the animation completes.
🎯 toggle can be used for expanding or collapsing elements.
