Lesson 12 Chaining

❮ Previous Lesson Next Lesson ❯

In previous lessons, we have learned how to write jQuery commands one at a time. In actual fact, we can combine the jQuery commands or methods together, the process is called chaining. The selector is:

$(selector).method1.method2.method3...methodN;

or you can place them on seperate lines.

$(selector)
.method1
.method2
.method3
 .
 .
.methodN;

Example 12.1

In this example, the jQuey code moves an image to the right, enlarges it. slides it up and then slides it down slowly.

<!DOCTYPE html>
<html>
<head>
<script>
 $(document).ready(function(){
   $("#btn1").click(function(){
        $("#lady1").animate({left: '500px'}).slideUp("slow").slideDown(4000);
		    });
});
</script>
</head>
<body>
<button id="btn1">Click to see the effect</button><br>
<img id="lady1" src="ladybug.gif" style="width:10%; height:auto; position:relative;">
</body>
</html>

Example 12.2

In this example, this jQuery code moves the image to the right, enlarges it, hides it and then shows it.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
   $("#btn2").click(function(){
   $("#lady2").animate({left: '500px',  height: '20%',  width: '20%'})
   .hide("slow")
   .show(4000);
	   });
});
</script>
</head>
<body>
<button id="btn2">Click to see the effects</button><br>
<img id="lady2" src="ladybug.jpg" style="width:50%; height:auto">

</body>
</html>

Example 12.3

In this example, the jQuery code moves the text to the right, enlarges the font, changes its color and font-weight to bold, slides it up and then slides it down.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn3").click(function(){
   $("#p1").animate({
   left: '300px',
   fontSize: '3em',
      })
	.css('color', 'blue')
	.html('<b>It's Magic!!</b>')
	.slideUp('slow')
	.slideDown('4000');  
	  });
});
</script>
</head>
<body>
<button id="btn3">Click to see changes to the text below</button><br>
<p id="p1" style=" position:relative;">It's Magic!!.</p>

</body>
</html>

Any Magic?

Example 12.4

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#btn4").click(function(){
   $('li[id!="a"]')
   .hide()
   .delay(100)
   .fadeIn(2000)
   .addClass('fruits');
   });
});
</script>
</head>
<body>
<ul>
<li id="a">Apple
<li id="b">Banana
<li id="m">Mango
<li id="o">Orange
</ul>
<button id="btn3">Click to see changes to the items below</button><br>
</body>
</html>

* li[id!="a"] means all items in the list are selected except the item with id="a".

*The delay()method creates a pause.

*The addClass('fruits') method means adding new css rules defined by the Class="fruits".

Apple
Banana
Mango
Orange

❮ Previous Lesson Next Lesson ❯