Question

我有一个非常简单的页面，其中包含一个块：

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

jquery代码如下：

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

所以我正在尝试启动一系列回调函数，它正在运行我遇到的问题是第一个动画中的短暂停顿（在第一个块“增长”期间）。停止（可能？）1.5秒然后它会顺利运行知道为什么会这样吗？

Answer 1

在第二次回调中摆脱()：

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

你只能使用CSS，不需要jQuery：

#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

问题是多层次的。它是您的浏览器的十字架，您的系统规格，甚至是显示器的分辨率和刷新率。以及整体动画本身。在你的情况下，动画时间非常短，变化也很微妙。所以它会进行快门以匹配宽度/高度和时间的差异，以匹配新的宽度/高度。

因为它必须在那个时间计算像素与持续时间。

修复它的一种方法是将给定的时间从300增加到其他东西，例如更大的数字。

jquery动画短暂口吃

3 个答案: