If we want to create custom animation than for this purpose jquery animation is used.

jquery animation method syntax is below:-

Syntax :-

$(part to be selected).animate({parameters},speed,callback);

Queue functionality of jquery animate() method

jquery contains queue functionality by default. i.e if we write animate() calls one after other, jquery will create internal queue for these calls and then run these calls one after other. 

so if we want to run different animation one after other than this functionality of jquery animate() method is very helpful.

For using this functionality first we have to include below script into our head tag  :-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

below is the html code  :-

<button>Click here to animate text</button>

<p>We can give any information here about the animate effect.</p>

<div> This div get animate</div>

below is the css for above code:-

       div{
             background-color:#7D7D7D;
             height:100px;
             width:100px;
             color:#fff;
            }

below is jquery code for above html:-

<script> 
$(document).ready(function(){
    $("button").click(function(){
        var p = $("div");
        p.animate({height: '400px', opacity: '0.6'}, "fast");
        p.animate({width: '400px', opacity: '0.9'}, "fast");
        p.animate({height: '200px', opacity: '0.6'}, "fast");
        p.animate({width: '200px', opacity: '0.9'}, "slow");
    });
});
</script>

below is jquery fiddle link where i have run above code:-

https://jsfiddle.net/yev8LcLw/17/