Learn how to build and design websites with our tutorials.

jQuery Method Chaining Tutorial

View Tutorial Contents


What Is jQuery Method Chaining?

jQuery allows you to continue to call jQuery methods on objects, one after the other, instead of running methods on the same selected HTML element one at a time. This practice is called "chaining".

Chaining in jQuery keeps web browsers from having to find the same selected HTML element again.

To chain methods, you append the following method to the previous one.


How To Chain Methods

The code example below shows you how to chain methods in jQuery.


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

<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>

</head>
<body>

<div>

<p>
This is a paragraph.
</p>

</div>

<button>Click Here</button>

<script>

$(document).ready(function(){
    $("button").click(function(){
        $("div")
    			.animate({"width" : "300px"}, "slow")
        		.animate({"height" : "300px"}, "slow")
        		.fadeTo("slow" , 0.5)
        		.animate({"width" : "200px"})
        		.animate({"height" : "200px"})
        		.fadeTo("slow" , 1);
    });
});

</script>
</body>
</html> 

The example below contains two callback functions.

This is a paragraph.