Effects and animation

What you'll learn

How to use .hide(), .show(), .fadeIn(), .slideToggle() and .animate().

Why it matters

Small movements help people notice change: a menu sliding open, a message fading in. jQuery made these a one-liner long before CSS had good animation support.

Explanation

Built-in effects:

• .show(), .hide(), .toggle()
• .fadeIn(), .fadeOut(), .fadeToggle()
• .slideDown(), .slideUp(), .slideToggle()

Each takes an optional duration in milliseconds, or the words "fast" and "slow".

.animate({ property: value }, duration) animates numeric CSS properties such as width, height, opacity and left.

Example

Step-by-step walkthrough

1. Clicking Toggle slides the box up or down over 400 ms. Click again to reverse.
2. Clicking Grow animates the width from 80px to 240px over 600 ms.
3. animate changes numeric properties gradually. It cannot animate colours without a plugin.

Try it yourself

Add a button that calls $("#box").fadeToggle().

EffectsjQuery

Editable code<style> #box { width: 80px; height: 80px; background: royalblue; margin-top: 10px; } </style> <button id="toggle">Toggle</button> <button id="grow">Grow</button> <div id="box"></div> <script> $(function () { $("#toggle").on("click", function () { $("#box").slideToggle(400); }); $("#grow").on("click", function () { $("#box").animate({ width: "240px" }, 600); }); }); </script>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Animating non-numeric properties such as color with .animate().
• Queuing too many animations by clicking fast. Use .stop() first.
• Hiding content that screen readers need without a visible alternative.
• Forgetting that hidden elements are not in the layout (display: none).

Quick quiz

Summary

• show/hide/toggle, fade* and slide* are quick effects.
• .animate() changes numeric CSS properties over time.
• CSS transitions are the modern default for simple animations.

You finished the jQuery beginner section. Next: AJAX and when to use jQuery versus modern JavaScript.

<style>
  #box { width: 80px; height: 80px; background: royalblue; margin-top: 10px; }
</style>

<button id="toggle">Toggle</button>
<button id="grow">Grow</button>
<div id="box"></div>

<script>
  $(function () {
    $("#toggle").on("click", function () {
      $("#box").slideToggle(400);
    });
    $("#grow").on("click", function () {
      $("#box").animate({ width: "240px" }, 600);
    });
  });
</script>