jquery animation briefly stutters -

i have simple page block such:

#block {     width: 50px;     height: 50px;     background: red;     visibility: hidden; } 

jquery code follows:

var block = $('#block'); function changecol() {     block.animate({width: 100, height: 100}, 300, function() {         block.animate({width: 50, height: 50}, 300, changecol());     }); } $(document).ready(function() {     block.css('visibility', 'visible');     changecol(); }) 

so i'm trying start chain of callback functions , it's working.
problem have short pause in first animation (during first block "growth"). stops (maybe?) 1.5 seconds , run smoothly.
idea why happens?

get rid of () in second callback:

var block = $('#block');  function changecol() {     block.animate({width: 100, height: 100}, 300, function() {         // changecol instead of changecol() here         block.animate({width: 50, height: 50}, 300, changecol);     }); }  $(document).ready(function() {     block.css({visibility:'visible'});     changecol(); }); 

jsfiddle prove it