Codelab Editor
Free Online HTML Editor
Run
Learn jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery Callback Example – Method With Callback</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body { font-family: Arial, sans-serif; padding: 2rem; background: #f5f5f5; } h2 { color: #333; } #box { width: 200px; height: 100px; background: #3182ce; color: white; line-height: 100px; text-align: center; margin-bottom: 1rem; } button { padding: 0.5rem 1rem; background: #2d3748; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #1a202c; } </style> </head> <body> <h2>Method With Callback</h2> <p>This example hides the box and then shows an alert, which will fire after the hide animation finishes.</p> <div id="box">Box</div> <button id="btnWithCallback">Hide Box</button> <script> $('#btnWithCallback').click(function(){ $('#box').hide(600, function(){ // runs after box is hidden alert('Box is now hidden'); }); }); </script> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console