Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>slideUp() and animate() Callbacks</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> #panel{width:220px;height:70px;background:#2196f3;color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:10px;} #track{position:relative;height:40px;background:#f0f0f0;margin-bottom:10px;} #ball{position:absolute;left:0;top:5px;width:30px;height:30px;border-radius:50%;background:#f6c343;} </style> </head> <body> <button id="slideBtn">Slide Up Panel</button> <div id="panel">Panel</div> <div id="status" style="font-weight:bold;margin-bottom:20px;"></div> <button id="animateBtn">Animate Ball</button> <div id="track"><div id="ball"></div></div> <script> $("#slideBtn").on("click", function () { $("#status").text("Closing..."); $("#panel").slideUp(400, function () { $("#status").text("Panel is fully closed."); }); }); $("#animateBtn").on("click", function () { $("#ball").css({ left: "0px", background: "#f6c343" }); $("#ball").animate({ left: "250px" }, 600, function () { $(this).css("background", "#04AA6D"); }); }); </script> </body> </html>
Output