jQuery Multiple Function Chaining Joining


How to join two or more jQuery function at a single satement?

As per jQuery's slogan 'Write less, do more' we can perform number of functions in a single line statement without accessing the HTML element again and again.

jquery tutorials

Syntax of jQuery Chaining

$("TagSelector").functionName().functionName(); //Syntax $("#mydiv").fadeIn('slow').animate({ left:'100px'}); //Example Let's go through an example.

jQuery function chaining to multiple function with single statement

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="mybutton">Click To Perform Multiple jQuery functions</button> <div id="mydiv" style="display:none; position:relative;">Write Less ,Do More With jQuery</div> <script> $("#mybutton").click(function(){ $("#mydiv").fadeIn(2000).animate({ left:'100px',} , "slow") .animate({ left:'-25px'} , "slow"); }); </script>

Output of jQuery functions Chaining

Chapter Next »