0

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

#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 秒，然后它会平稳运行。
知道为什么会这样吗？

4

3 回答 3

4

摆脱()你的第二个回调：

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 来证明它

于 2013-08-23T16:31:53.853 回答
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; }
}
于 2013-08-23T16:37:53.890 回答
0

问题是多层次的。它是您所使用的浏览器、系统规格、甚至显示器分辨率和刷新率的交叉。以及整体动画本身。在您的情况下，动画时间非常短，并且变化也很微妙。所以它会关闭以匹配宽度/高度和时间的差异以匹配新的宽度/高度。

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

解决它的一种方法是增加给定的时间，从 300 到其他值，例如更大的数字。

于 2013-08-23T16:31:46.337 回答