简单的动画，寻找特定的效果

Question

我正在努力使用jQuery中的简单动画，我想我可以寻求帮助！

这是一个正在发挥作用的小提琴：http://jsfiddle.net/hAWAw/1/

JS

setInterval(function() {
   var number = Math.floor(Math.random() * 9);
   $('#digit1').animate({
      top: "-45px"
   }, 300, function() {
      $(this).css('top', '0px');
      $('#digit1').text(number);
   });
}, 1000);​

当你看到数字翻转时，我正在寻找与数字时钟相同的效果。

请注意，我不使用图片，只使用文字。

所以我希望数字首先出现在广场的底部，所以我们无法看到它。动画到广场的中间，保持一点，然后动画到顶部，所以我们不能再看到它。就像三维旋转一样。

有任何帮助吗？

哦，然后下一步是我不希望它每隔x秒动画一次。我希望有一种更“自然”的感觉，所以它可以在2秒后或30秒后制作动画。为此，我想使用setTimeout而不是setInterval，但这不起作用！

Answer 1

你需要2个动画并延迟。所以你需要调用两次动画并在第一次动画后使用setTimeout。

http://jsfiddle.net/hAWAw/2/