jQuery Chaining

The jQuery provides Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.

Example of Code

<style>
.example-jquery-chaining-paragraph {
    width: 200px;
    padding: 40px 0;
    font: bold 24px sans-serif;
    text-align: center;
    background: #aaccaa;
    border: 1px solid #63a063;
    box-sizing: border-box;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".example-jquery-chaining-start").click(function(){
        $(".example-jquery-chaining-paragraph").animate({borderWidth: 30}).animate({width: "100%"}).animate({fontSize: "46px"});
    });
    $(".example-jquery-chaining-start-reset").click(function(){
        $(".example-jquery-chaining-paragraph").removeAttr("style");
    });
});  
</script>
<p class="example-jquery-chaining-paragraph">jQuery chaining effect</p>
<button type="button" class="example-jquery-chaining-start">Start</button>
<button type="button" class="example-jquery-chaining-start-reset">Reset</button>

Output