1

各スパンを 3 秒間隔でランダムな色の間で回転させようとしています。

JSFiddle: http://jsfiddle.net/WERFJ/21/

<h1><span class="first">TEXT1</span> <span class="second">TEXT2</span> <span class="third">TEXT3</span></h1>

現在、以下のコードとjquery.animate-colorsプラグインを使用しています。これを実行するか、同じ効果をより速く得る方法はありますか? Chrome はそれを処理できますが、FF はしばしばクラッシュします。ありがとう！

$(document).ready(function() {  
        spectrum();  

            function spectrum(){  
                var hue1 = 'rgb(' + 128 + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
                var hue2 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 128 + ',' + (Math.floor(Math.random() * 256)) + ')';  
                var hue3 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + 128 + ')';  

                $('.first').animate( { color: hue1 }, 3000);
                $('.second').animate( { color: hue2 }, 3000);
                $('.third').animate( { color: hue3 }, 3000); 
                spectrum();  
        }  
    });
4

3 に答える 3

1

あなたの問題は、再帰呼び出しがアニメーションの終了を待っていないことだと思います。呼び出しをコールバックとして最後の animate 呼び出しに追加することで、アニメーションのキューイングや無限チェーンの代わりに、最後の呼び出しが完了したときにのみ呼び出すことができます。http://jsfiddle.net/WERFJ/23/現在、Firefox で正常に動作しているようです

$(document).ready(function() {
    spectrum();

    function spectrum() {
        var hue1 = 'rgb(' + 128 + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        var hue2 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + 128 + ',' + (Math.floor(Math.random() * 256)) + ')';
        var hue3 = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + 128 + ')';

        $('.first').animate({
            color: hue1
        }, 3000);
        $('.second').animate({
            color: hue2
        }, 3000);
        $('.third').animate({
            color: hue3
        }, 3000, spectrum);
    }
});​
于 2012-06-21T02:16:20.240 に答える
0

$.whenアニメーションをラップしthen()、次のシリーズを実行するために使用します。次に、jQueryの遅延オブジェクトは、最初からやり直す前に、すべてのアニメーションが完了していることを確認します。

デモ：http：//jsfiddle.net/WERFJ/26/

var anim_1 = $('.first').animate({ color: hue1}, 3000);
var anim_2 = $('.second').animate({color: hue2}, 3000);
var anim_3 = $('.third').animate({color: hue3}, 3000);

$.when(anim_1, anim_2, anim_3).then(spectrum);
于 2012-06-21T02:29:40.700 に答える
0

ユーザーの観点から見た最初の遅延は、関数の実行が終了するまでブラウザーが表示を更新しないためですが、関数はスタック オーバーフローが発生するまで再帰的に呼び出し続けるためです。または、FF で「再帰が多すぎる」 " エラー。キューに入れられたすべてのアニメーションが実際に機能し始めるのは、「再帰が多すぎる」というエラーが関数をクラッシュさせた後でのみです。

これを回避するには、関数の最後の行を変更して、setTimeout()それ自体を直接呼び出すのではなく、別の呼び出しをキューに入れるために使用します。

setTimeout(spectrum,3100);

http://jsfiddle.net/WERFJ/24/

于 2012-06-21T02:20:16.030 に答える