Animation and Effects

Effects With One Line

$('#box').fadeIn(500);
$('#box').fadeOut(500);
$('#box').slideDown(300);
$('#box').slideUp(300);
$('#box').hide(400);   // animated hide
$('#box').show(400);   // animated show

The number is the duration in milliseconds. A callback can run when the effect finishes.

Complete Callbacks

$('#box').slideUp(300, function () {
  $('#box').remove();  // run after the animation
});

Custom Animations With .animate()

$('#box').animate(
  { left: '+=200px', opacity: 0.5 },
  600,
  'swing',
  function () { console.log('done'); }
);

CSS properties animate when they are numeric or color-based. Use easing (swing, linear) to shape the motion.

Chaining Effects

$('#box').fadeIn(300).delay(400).slideUp(300);

Effects queue by default, so chained effects run one after another. Add queue: false in .animate() options to run concurrently.

Key Points

• fadeIn/out and slideUp/down cover most UI needs.
• Handlers receive duration and a completion callback.
• .animate() animates numeric CSS properties.
• Effects queue; use delay() to pause between them.