📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials jQuery in Practice Custom Animations

Custom Animations

5 min read
$.animate() animates any numeric CSS property to a target value over time. Animations queue on the same element and play one after another by default. Use queue: false to run animations simultaneously.

$.animate()

$('#box').animate({
  left:    '200px',
  opacity: 0.5,
  width:   '300px'
}, 800, 'swing', function() {
  console.log('Animation complete!');
});

// Queue multiple
$('#box').animate({ left: '200px' })
           .animate({ top:  '100px' })
           .animate({ opacity: 0 });