0

これが私のアニメーションの JsFiddle です: http://jsfiddle.net/cCAPk/

これを見ると、div が元の位置に戻ると、黒い四角が数秒間空になっていることがわかります。私はそれが起こることを望んでいません。CSSにoverflow:hiddenを追加すると、divの終了位置と開始位置が明確にわかります。

どうすれば修正できますか？

また、アニメーションがいつ開始されるかを計算する最良の方法があるとは思いません..

何か助けはありますか？

JS は次のとおりです。

function loop2() {
  var lenght = $('#digit8').html().replace(/[^0-9]/gi, "").length;
  var top = $('#digit8').css("top");
  var max = "-" + (lenght -1) * 45 + "px";

   $('#digit8').animate({
      top: "-=45"
   }, 300, function() {

    if(top == max ){
        $('#digit8').css("top","45px");    
    }
});
}

 for (i=0; i<5; i++)
 {
  var number = Math.floor(Math.random()*9);              
  $("#digit8").append(number+" ");
}

setInterval("loop2()",600);​
4

1 に答える 1

0

これが私が思いついたものです: http://jsfiddle.net/cCAPk/2/

簡単に削除できるように、要素をテキストではなく作成するようにジェネレーターを変更しました。ループはラッパーを 45 ピクセル上にシフトし、コールバックで最初の要素を削除して最後に配置します (説明のためにラッパーを 45 ピクセル下に再シフトします)。

DOM 操作が少ないソリューションは、コールバックを使用しないことです: http://jsfiddle.net/cCAPk/3/

これには、最初の解決策で対処しようとした問題が 1 つあります。最後の要素と最初の要素の間のアニメーションが他の要素と同じではありません (div を元に戻すと、最後の要素は表示されません)。

于 2012-10-03T19:57:22.100 に答える