CODEWITHSUNDEEP
jqueryjquery-animatejquery-callback
Alan Piralla
Alan Piralla

Reputation: 1196

jquery animation briefly stutters

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?

Upvotes: 0

Views: 188

Answers (3)

PlantTheIdea
PlantTheIdea

Reputation: 16359

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

Upvotes: 4

Strobel
Strobel

Reputation: 167

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; }
}

Upvotes: 2

chris
chris

Reputation: 36937

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.

Upvotes: 0

Related Questions