Learn how to build and design websites with our tutorials.

jQuery Callback Functions Tutorial

View Tutorial Contents

What Is A Callback Function?

A callback function is a function that is passed to another function as a parameter.

Within jQuery, a callback function is executed after all of the effects within a jQuery method are finished.

jQuery Callback Functions Syntax

The syntax for a callback function would typically be something like:

$(selector).method(duration, callback);


$(selector).method({CSS parameters}, speed, callback);

The example below shows you how to pass a function to jQuery method as a parameter.

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>



This is a paragraph.

<button id="fade-out">Fade Out</button> <button id="fade-in">Fade In</button>


		$("div").fadeOut("slow", function(){
			alert("The <div> is gone!");
		$("div").fadeIn("slow", function(){
			alert("The <div> is back!");


The example below contains two callback functions.

This is a paragraph.