Tuesday , March 28 2017
Home / jquery / JQuery Callback Functions Example Tutorial

JQuery Callback Functions Example Tutorial

JQuery Callback Functions :

Callback functions are the greatest addition in JQuery. We can pass the callback functions into every Jquery functions. The JQuery Call back functions are called by the JQuery it self when  function execution is completed.

Line by line execution is performed in JavaScript. But in jQuery, sometimes skips the code to next line without executing the previous line. The jQuery Callback Functions are used to prevent this type of execution on jQuery.

Most of the time the effect method is to execute the functions before finishing the animation. So, in effects, the jQuery callback functions are passed as a parameter. This is the last parameter on the effect method. Once the effect is finished the callback function is executed.

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

The parameter duration represents three speeds. They are fast, slow and normal. It runs in few milliseconds. The jQuery Callback Functions represents the execution of function after animation completes. It executes only once for each element on a web page.

Here is the example for JQuery Callback function :


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery Callback Functions Example</title>
<style type="text/css">
p {
font-size: 20px;
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<button>FadeToggle</button>
<button>FadeToggle Callback</button>
<p>FadeToggle</p>
<p>FadeToggle Callback</p>
<div id="log"></div>

<script>
$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function() {
$("p:last").fadeToggle("fast", function() {
alert("Action completed..")
});
});
</script>
</body>
</html>

On the above example, we can get “Action completed..” Alert after fadeToggle() method executed successfully.

Happy Learning 🙂

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

jQuery Add Elements Example Tutorials

In JQuery, we can easyly add HTML elements at run time. In this tutorials we …

Leave a Reply

Your email address will not be published. Required fields are marked *