`
jQuery Chaining
jQuery Method Chaining
When you use same element more than once. In this case browser not find the element. There is a technique called jQuery chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s). To chain an action, you simply append the action to the previous action.
Example
The following example chains together the css(), slideUp(), and slideDown() methods. The "pid" element first changes to red, then it slides up, and then it slides down.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#pid").css("color", "red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="pid">jQuery is fun with channing!!</p>
<button>Click me to check channing</button>
</body>
</html>Output
The pid element first changes to red, then it slides up, and then it slides down.
Prev Next