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();
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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