animate class using jquery

Hi!
  In this tutorial I'll show you how to animate any function using jquery with .animate function :
checkout this fiddle :
example

Problem: On click make the height of box 50px;


Html :
<div class="Box">
</div>


CSS:
.Box
{
     height:100px;
     width:100px;
     background-color:black;
}

Jquery :
$(document).ready(function(){
    $('.Box').click(function(){
            $("#box").animate({height: "50px"});
      });
});


Note : you can define the transition time like this :
$(document).ready(function(){
    $('.Box').click(function(){
            $("#box").animate({height: "50px"}, 2000);
      });
});


Thats all you are done
Happy Coding