Codelab Editor
Free Online HTML Editor
Run
Learn jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery show() — Callback</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> body { font-family: Arial, sans-serif; padding: 20px; } .box { width:150px; height:100px; background:#4caf50; color:#fff; display:none; text-align: center; line-height: 100px; margin-bottom:10px; } button { padding:8px 12px; background:#007acc; color:#fff; border:none; border-radius:4px; cursor:pointer; } button:hover { background:#005fa3; } .msg { margin-top:8px; color:green; font-weight:bold; } </style> </head> <body> <h2>jQuery show() — Callback</h2> <p>The callback writes “Box is shown” after the 400 ms reveal animation.</p> <div class="box" id="box8">Now you see me</div> <button id="btn8">Show</button> <div id="msg8" class="msg"></div> <script> $(function(){ $('#btn8').click(function(){ $('#box8').show(400, function(){ $('#msg8').text('Callback: Box is shown'); }); }); }); </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