Question

这是我的动画的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);

Answer 1

以下是我提出的问题：http://jsfiddle.net/cCAPk/2/

我更改了生成器以创建非文本元素，以便更轻松地删除。循环将包装器45px向上移动并在回调时移除第一个元素并将其放在最后（将包装器重新调整为45px以进行计算）。

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

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

对我的jquery动画稍作修改

1 个答案: