jQuery Chaining


The jQuery chaining allows you to add multiple methods in a single statement.

It is possible to do this because most of the jQuery methods return a jQuery object which can be used to call some other method.

The following example chains the methods css(), slideUp() and slideDown(). The “p” element first changes color to blue, then slides up and then down.

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color", "blue").slideUp(2500).slideDown(2500);
  });
});
</script>
</head>
<body>
 <p>This is paragraph tag.</p>
  <button>Click here</button>
</body>
</html>