📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
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 });