0

私はほとんど機能している機能を持っています。

クラスが .hex の要素を見つけて、5 ～ 13 の乱数を実行し、それらの .hex アイテムをドキュメントの本文に追加します。

次に、遅延があり、六角形がゆっくりとフェードインおよびフェードアウトします。

私がやりたいのは、これをループで作成して、常にフェードインとフェードアウトすることです。

これが機能するはずのコードをコメントアウトしましたが、現在は機能していません。

すべてのコードを initHex() という新しい関数にラップし、コードの後で setInterval を使用して (現時点では) 12 秒ごとに関数を実行するだけでした。

関数が実行され、非常に速くループし始め、数値が劇的に増加し、すぐにブラウザーの応答が停止することをコンソールで確認できます。

関数があまりにも多くのコードにラップされているのではないかと思っています。

新しい関数がフェード インするときに、現在の関数がまだ実行されている (六角形がフェード アウトしている) ことを願っています。

関数の最後に、既存の 16 進要素を削除して、ドキュメントに追加されないようにする必要があると想定しています。私はこれを試しました。

関数は次のとおりです。

 //function initHex() {

    $rndNum = Math.floor(Math.random() * 8) + 5;
    var e = $('.hex');
        for (var i = 0; i < $rndNum ; i++) {
        $docHeight = $(window).height();
        $docHeight = Math.random() * $docHeight * 2;
        $docWidth = $(window).width();
        $docWidth = Math.random() * $docWidth;
        $rndOpacity = Math.random();
        $rndSpeed = Math.floor(Math.random() * 2000) + 2000;
        e.each(function(){
            $(this).css({
                position:   'absolute',
                top:        $docHeight,
                left:       $docWidth - 195,
                opacity:    $rndOpacity
            });
            e.clone().prependTo('body').delay(e.length*800).fadeIn($rndSpeed).delay(1000).fadeOut($rndSpeed*2);
            console.log($rndNum, $rndOpacity, $rndSpeed);
        });
    }
//}

 //setInterval(initHex, 12000);

実行した六角形を削除するという点では、次のことを試しました。

 e.clone().prependTo('body').delay(e.length*800).fadeIn($rndSpeed).delay(1000).fadeOut($rndSpeed*2.5, function(){
      e.remove();
 });

フィドルは次のとおりです。http://jsfiddle.net/lharby/j5bSz/ 心ゆく までフォークしてください。

ティア

4

1 に答える 1

1

私はあなたのコードを作り直しました。あなたはいくつかの間違いを犯しました。はい、hex毎回クラスで要素の束全体を複製しようとしましたが、配列にはメソッド clone がありません。

これを試して：

function initHex() {

    var $rndNum = Math.floor(Math.random() * 8) + 5;
    for (var i = 0; i < $rndNum ; i++) {
        var $docHeight = $(window).height()
          , $top = Math.random() * $docHeight * 2
          , $docWidth = $(window).width()
          , $left = Math.random() * $docWidth - 195
          , $rndOpacity = Math.random()
          , $rndSpeed = Math.floor(Math.random() * 2000) + 2000;
        $('<div></div>').addClass('hex').css({
            position:   'absolute',
            top:        $top,
            left:       $left,
            opacity:    $rndOpacity
        }).prependTo('body').delay(1000).fadeIn($rndSpeed).delay(1000).fadeOut($rndSpeed*2, function(){
           this.remove();
        });
    }
}

setInterval(initHex, 12000);

もう 1 つ、このコードはまだ最適化されていませんが、わかりやすくするためにコードをできる限り保存しようとしました。

http://jsfiddle.net/andbas/DZSJT/1/

于 2013-10-30T11:33:24.360 に答える