Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animate Multiple Elements</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>.dot{position:relative;width:20px;height:20px;border-radius:50%;display:inline-block;margin:4px;background:#ff8a65}</style> </head> <body> <div class="dot"></div><div class="dot"></div><div class="dot"></div> <button id="run">Stagger</button> <script> $("#run").on("click", function(){ $(".dot").each(function(i, el){ $(el).delay(i*120).animate({left: "+=120"}, 300).animate({left: 0}, 300); }); }); </script> </body> </html>
Output