0

I'm struggling with a simple animation in jQuery, I figured I could ask for help!

Here's a working Fiddle of where am at right now : http://jsfiddle.net/hAWAw/1/

The JS

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

I'm looking for the same effect as on a digital clock, when you see the number flipping.

Please note that im not using images, only text.

So I want the number to appear first at the bottom out of the square, so we cant see it. animate to the middle of the square, stay there a bit, and then animate to the top, so we cant see it anymore. Just like a 3d rotation .

Any help?

Oh and then the next step is that I dont want it to animate every x seconds. I want a more "natural" feeling so it can animate after 2 seconds or after 30 sec lets say. To do this, I thought using setTimeout instead of setInterval, but that didnt work!

4

1 回答 1

2

You need 2 animations and delay between. so you need call animate twice and use setTimeout after first animate.

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

于 2012-10-02T19:46:50.617 回答