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

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 に答える