jQuery — Callback

Basic Callback

$("p").hide(400, function() {
    console.log("Animation complete!");
});

Callback with fadeIn

$("p").fadeIn(600, function() {
    $(this).addClass("visible");
});

Callback in Chaining

$("div")
    .slideUp(300)
    .slideDown(300, function() {
        console.log("Slide complete");
    });

Multiple Effects, One Callback

$("p").hide(200, function() {
    $(this).text("Hidden!").show(200);
});

Callback vs Promise

// Callback style
$("p").fadeOut(400, function() {
    console.log("Done");
});

// Promise style (jQuery 1.5+)
$("p").fadeOut(400).done(function() {
    console.log("Done");
});

// jQuery Deferred
var def = $("p").fadeOut(400);
def.done(function() { console.log("Success"); });
def.fail(function() { console.log("Failed"); });
def.always(function() { console.log("Always"); });

practical Example

$("#deleteBtn").click(function() {
    $("#item").fadeOut(300, function() {
        $(this).remove();
        $("#status").text("Item deleted");
    });
});

Mini Practice

1. Add a callback to hide()
2. Chain effects with a callback at the end
3. Use .done() for promise-style
4. Remove an element after an animation

Up Next

Continue with Chaining — linking multiple jQuery methods together.