1

[orbit] カルーセルが (1 ページに) たくさんあるサイトを構築しています。各カルーセルには再生/一時停止ボタンがあります。デザイナーは、カルーセルの一時停止ボタンを脈動させたいと考えています (つまり、不透明度を 80% から 100% に変更してから 80% に戻して、ループし続けるようにします)。

ページに 10 個以上のカルーセルがあるため、アニメーション GIF は jquery を使用するよりもパフォーマンスへの影響が少ないと考えていました (理由は聞かないでください)。私が正しいかどうか知りたいです。

私が使用する jquery コードは次のようになります (コード化していないので、構文エラーは気にしないでください)。

    function pb_animate () {
        $('.pausebutton').animate({opacity:0.8}, 300[ms], function () {
            $('.pausebutton').animate({opacity:1.0}, 300[ms], function () {
                pb_animate ()
            }
        }
    }

この場合、jquery とアニメーション gif のどちらが良いでしょうか? それとも私は何も心配していませんか？より良いjqueryソリューション/アプローチがある場合は、投稿してください。

4

2 に答える 2

3

CSS3は、Web 上でアニメーションを作成するための方法です。次の例では、不透明度を 1 と 0.8 の間で切り替えます (-{webkit,moz,o}-読みやすくするためにプレフィックスを削除しています)。

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.pausebutton {
    animation: pulse 4s infinite;
}

または、このjsBinを参照してください。(はい、一時停止/再生ボタンも CSS で行うことができます。)

于 2013-10-17T20:17:34.560 に答える