Objectives and outcomes

In this tutorial we are going to learn about jquery callback method. Callback method is used as a parameter inside effect methods. Callback function is executed after the effect method completes its execution successfully. One purpose of using callback method can be to stop further execution of script if effect method has an error. Example for the same is shown below:



Syntax for method

$(selector).show(speed,function()
{
.
.
.
});



Click the buttons and observe the effect






HTML code:

<html>
<head>
<meta charset="utf-8">
<title>Jquery callback method</title>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<div id="example">
<br/>
<p>Click the buttons and observe the effect</p><br/>
</div>
<br/>
<button id="butn1">Hide</button><br/>
<button id="butn2">Show</button>
</body>
</html>


CSS stylesheet

<style>
#example
{
background-color:#585858;
color:#fff;
font-size:24px;
height:100px;
text-align:center;
}
</style>


Javascript

<script>
$(document).ready(function()
{
$('#butn1').click(function()
{
$('#example').hide(function()
{
alert('Hide effect is called');
});
});
		
$('#butn2').click(function()
{
$('#example').show(function()
{
alert('Show effect is called');
});
});
});
</script>