0

这是我的动画的 JsFiddle：http: //jsfiddle.net/cCAPk/

如果你看它，你可以看到当 div 回到他原来的位置时，黑色方块是空的几秒钟。我不希望这种情况发生。如果在 css 中添加溢出：隐藏，您可以清楚地看到 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/

我更改了生成器以在非文本处创建元素，以便更轻松地删除。循环将包装器向上移动 45px 并在回调时删除第一个元素并将其放在末尾（将包装器向下移动 45px 以计入）。

一个较少 DOM 操作密集的解决方案是不使用回调：http: //jsfiddle.net/cCAPk/3/

这有一个我试图用第一个解决方案解决的问题：最后一个元素和第一个元素之间的动画与其他元素不同（将 div 向上移动时看不到最后一个元素）。

于 2012-10-03T19:57:22.100 回答