jquery animation briefly stutters

Question

I have a very simple page with a block as such:

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

jquery code as 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 to start a chain of callback functions and it's working.
The problem I have is a short pause in the very first animation (during the first block "growth"). It stops for (maybe?) 1.5 seconds and then it will run smoothly.
Any idea why that happens?

Answer 1

Get rid of the () in your second callback:

var block = $('#block');

function changecol() {
    block.animate({width: 100, height: 100}, 300, function() {
        // just changecol instead of changecol() here
        block.animate({width: 50, height: 50}, 300, changecol);
    });
}

$(document).ready(function() {
    block.css({visibility:'visible'});
    changecol();
});

jsFiddle to prove it

Answer 2

You can do it only using CSS, No jQuery is needed:

#block {
    width:50px;
    height:50px;
    -webkit-animation: changecol .5s infinite;
    -moz-animation: changecol .5s infinite;
    -o-animation: changecol .5s infinite;
    animation: changecol .5s infinite;
    background: red;
}

@-webkit-keyframes changecol{
    0%   { width: 50px; height: 50px; }
   50%   { width: 100px; height: 100px; }
  100%   { width: 50px; height: 50px; }
}
@-moz-keyframes changecol{
    0%   { width: 50px; height: 50px; }
   50%   { width: 100px; height: 100px; }
  100%   { width: 50px; height: 50px; }
}
@-o-keyframes changecol{
    0%   { width: 50px; height: 50px; }
   50%   { width: 100px; height: 100px; }
  100%   { width: 50px; height: 50px; }
}
@keyframes changecol{
    0%   { width: 50px; height: 50px; }
   50%   { width: 100px; height: 100px; }
  100%   { width: 50px; height: 50px; }
}

Answer 3

The problem is multi-tiered. Its a cross of the browser your on, your system specs, even the monitors resolution and refresh rate. As well as the overall animation itself. In your case the animation timing is very very short and the change is subtle as well. So its going to shutter to match the difference in width/height and time given to match the new width/height.

As it has to in that time calculate pixels vs duration.

One way to fix it, is increase the time given, from 300 to something else, a larger number for instance.