- A callback function is executed after the current animation is 100% finished.
- JavaScript statements are executed line by line. However, with animations, the next line of code can be run even though the animation is not finished. This can create errors.
- To prevent this, you can create a callback function.
- A callback function is executed after the current animation (effect) is finished.
jQuery Callback Example
The callback parameter is a function to be executed after the hide effect is completed:- $(selector).hide(speed,callback)
Syntax:
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
alert("The paragraph is now hidden");
});
Example:
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The
paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
Example without Callback:
Without a callback parameter, the alert box is displayed before the hide
effect
is completed:
syntax:
$("p").hide(1000);
alert("The paragraph is now hidden");
alert("The paragraph is now hidden");
Example:
<html>
<head>
<script type="text/javascript"
src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("The
paragraph is now hidden");
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
No comments:
Post a Comment