jQuery Method Chaining Examples

Method chaining, is a way to couple multiple methods to a single invocation, otherwise known as encapsulation.

Method Chaining Examples

    • .css().slideup().slidedown();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- Chaining allows us to run multiple jQuery methods (on the same element) within a single statement. -->
    <div class="box" style="width: 90px;height:90px;background-color: slateblue;"></div>
    <button class="btn1">chaining start</button>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
$(".btn1").click(function(){
    $(".box").css("background", "red").slideUp(2000).slideDown(2000)
  })
})
    </script>
</body>
</html>

 

 

 Tags: method chaining, encapsulation, jquery effects, jquery effects tutorials, jquery, jquery code snippets

MIT license