0

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);​

数字が反転するのを見ると、デジタル時計と同じ効果を探しています。

画像を使用せず、テキストのみを使用していることに注意してください。

だから私は数字が正方形の一番下に最初に現れるようにしたいので、私たちはそれを見ることができません. 正方形の真ん中に動き、そこに少しとどまり、それから一番上に動くので、もう見えません。3D 回転のように。

何か助けはありますか？

ああ、次のステップは、x 秒ごとにアニメーション化したくないということです。2 秒後または 30 秒後にアニメーション化できるように、より「自然な」感覚が必要です。これを行うには、setInterval の代わりに setTimeout を使用することを考えましたが、うまくいきませんでした。

4

1 に答える 1

2

2 つのアニメーションとその間の遅延が必要です。したがって、animate を 2 回呼び出し、最初の animate の後に setTimeout を使用する必要があります。

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

于 2012-10-02T19:46:50.617 に答える