WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

jQuery Animate

Previous Next

The jQuery .animate() method is one of the most powerful tools in jQuery — it lets you create custom animations by changing CSS properties over time.


jQuery animate() Method


The .animate() method allows you to gradually change CSS properties (with numeric values) using animation.


Syntax:



$(selector).animate({ properties }, speed, easing, callback);


  • properties: A map of CSS properties and values to animate
  • speed (optional): "slow", "fast", or milliseconds (e.g., 1000)
  • easing (optional): "swing" or "linear"




The following example demonstrates a simple use of the animate() method; it moves a <div> element to the right, until it has reached a style property of 50px:

Example
<script>
$(document).ready(function(){
$("#animateBtn").click(function(){
$("#box").animate({
left: "50px"
});
});
});
</script>
Try it yourself

jQuery animate() - Manipulate Multiple Properties


You can pass multiple properties inside the {} of .animate() to animate them at the same time.

Example
<script>
$(document).ready(function(){
$("#animateBtn").click(function(){
$("#box").animate({
width: "400px",
opacity: 0.5,
marginLeft: "50px"
});
});
});
</script>
Try it yourself

jQuery animate() - Using Relative Values


You can use += or -= to change CSS values relative to their current value.

Example
<script>
$(document).ready(function(){
$("#animateBtn").click(function(){
$("#box").animate({
width: "+=300px",
height: "+=100px",
opacity: 0.5,
marginLeft: "50px"
});
});
});
</script>
Try it yourself

jQuery animate() - Using Pre-defined Values


jQuery provides some built-in keywords that simplify common animations:

  • "show" – Reveals the element with animation
  • "hide" – Hides the element with animation
  • "toggle" – Toggles between show and hide states


__These keywords are especially useful with height, width, and opacity properties.

Example
<script>
$(document).ready(function(){
$("#animateBtn").click(function(){
$("#box").animate({
height: "toggle"
});
});
});
</script>
Try it yourself

jQuery animate() - Uses Queue Functionality


By default, .animate() uses a queue system, meaning:

___Animations are placed in a queue and executed one at a time, in the order you call them.

This helps build step-by-step animations without needing setTimeout() or complicated logic.


Example
<script>
$(document).ready(function(){
$("#animateBtn").click(function(){
$("#box")
.animate({ width: "300px" }, 800)
.animate({ height: "200px" }, 800)
.animate({ marginLeft: "50px" }, 800)
.animate({ opacity: 0.5 }, 800, function() {
$("#status").text("Animations completed in sequence!");
});
});
});
</script>
Try it yourself

Previous Next