1

http://jsfiddle.net/GNrUM/

上記の現在のjsfiddleは、2秒のカウントダウンを示しています。テキストがなく、数字だけがあると想像してください。私は見つけようとしていました：

a）何らかのアニメーションをjsに統合して、現在カウントされている間に（その期間に合わせて）数値のサイズ、色、および位置を変更する方法。Css3 は機能しますが、JavaScript ベースにする必要があるため、モバイルの古いブラウザーでも機能します。

b) カウントダウンが終了したら、他のコンテンツを新しいページのように表示しますが、同じ URL のままです。

どんなフィードバックでも大歓迎です。

編集：途中で私を助けるための良いヒントでさえ、私が自分でそれを理解するのを助けるのに役立つかもしれません. それは、js の初心者である構文の知識が不足しているだけです。乾杯

4

4 に答える 4

6

animate() 関数を使用する

var sec = 10
var timer = setInterval(function() {
    $('#hideMsg span').animate({
        opacity: 0.25,
        fontSize: '2em'
    }, 500, function() {
        $('#hideMsg span').css('opacity', 1);
        $('#hideMsg span').css('font-size', '1em');
        $('#hideMsg span').text(sec--);
    })

    if (sec == -1) {
        $('#hideMsg').fadeOut('fast');
        clearInterval(timer);
    }
}, 1000);​

JSFiddle リンク: http://jsfiddle.net/GNrUM/412/

于 2012-09-11T15:52:37.917 に答える
0

私はこのライブラリに似たものを見るでしょう：http：//ricostacruz.com/jquery.transit/

利用可能な場合はCSS3トランジションを使用し、適切なフォールバックを実行します。

追加する場所については、これを行う前に：

$('#hideMsg span').text(sec--);

必要なアニメーションを実行し、アニメーションの終了時に上記のコードを実行してタイマーを更新します。

于 2012-09-11T15:38:27.520 に答える
0

http://jsfiddle.net/GNrUM/410/

var sec = 10
var timer = setInterval(function() { 
    var color = sec > 5 ? "red" : "green";
   $('#hideMsg span').text(--sec).css("font-size", 10+sec*2 + "px").css("color", color);
   if (sec == 0) {
      $('#hideMsg').fadeOut('fast');
      clearInterval(timer);
   } 
}, 1000);​

これらの値はあなたが探しているものではないかもしれませんが、これで始めるための基本的なアイデアが得られます。

于 2012-09-11T15:46:08.797 に答える
0

過去にこのjQueryプラグインを使用しました。onUpdateおよびonCompleteコールバックがあります。カウンターのスタイルを変更しonUpdateたり、非表示にしたり、コンテンツをロードしたりできるはずonCompleteです。それはあなたにとって意味がありますか？

カウントアップではなく、カウントダウンが必要だと思いますが、プラグインは非常に単純なので、問題なく適応できるはずです。

于 2012-09-11T15:47:42.877 に答える