jQuery Chaining

jQuery provides strong feature called chaining method that allows us to run multiple jQuery methods on the element within a single statement of code.

This can be possible because of jQuery methods returns a jQuery object that can be further user to call another method.

Syntax

$(selector).action().action().action();    // Chain of actions

To perform chain of action, you need to simply append the action to the previous action.

Example

$(document).ready(function() {
  $("#btnstart").click(function(){
    var $box = $("#animatebox");
    $box.animate({height: "300px"});
    $box.animate({width: "300px"});
    $box.animate({opacity: 0.5});
    $box.animate({marginLeft: "100px"});
    $box.animate({borderWidth: "10px"});
    $box.animate({fontSize: "40px"});
  });
  $("#btnstop").click(function(){
    var $box = $("#animatebox");
    $box.animate({height: "100px"});
    $box.animate({width: "100px"});
    $box.animate({opacity: 1});
    $box.animate({marginLeft: "10px"});
    $box.animate({borderWidth: "5px"});
    $box.animate({fontSize: "15px"});
  });
});

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Run it...   »

Example Result