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"});
});
});
Example Result