Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run ยป
HTML / CSS / JS
// Sequenced animations using the queue $('#rocket') .animate({ bottom: '200px' }, 800) .delay(500) .animate({ opacity: 0 }, 400, function () { $(this).hide(); }); // Insert a custom step mid-queue $('#item') .animate({ left: '200px' }, 500) .queue(function (next) { $(this).addClass('highlighted'); next(); // must call next to continue }) .animate({ top: '100px' }, 500); // Stop stacking on hover $('.card').on('mouseenter', function () { $(this).stop(true).animate({ marginTop: '-=10px' }, 200); }).on('mouseleave', function () { $(this).stop(true).animate({ marginTop: '0' }, 200); });
Result
Open