0

CSS3 アニメーションに大きく依存しているページがあります。私は、CSS3 アニメーションを持たないブラウザー (IE を見て...) で機能するフォールバックとなるスクリプトを作成中です。必要なことの基本を実行する次のスクリプトを作成しました。

var $j = jQuery.noConflict();
$j(document).ready(function() {
    //Hide All Elements to Fade Them In
    $j(".frame-1, .frame-2, .frame-3, .frame-4, #tile-wrap, #copyright").addClass("hide", function() {
        //Change Color of "Frames"
        $j(".frame-1, .frame-2, .frame-3, .frame-4").addClass("color", function() {
            //Frame 1
            $j(".frame-1").fadeIn("slow", function() {
                $j('.frame-1').delay(3000).fadeOut('slow', function() {
                    //Frame 2
                    $j(".frame-2").fadeIn("slow", function() {
                        $j('.frame-2').delay(3000).fadeOut('slow', function() {
                            //Frame 3       
                            $j(".frame-3").fadeIn("slow", function() {
                                $j('.frame-3').delay(3000).fadeOut('slow', function() {
                                    //Frame 4 
                                    $j(".frame-4").fadeIn("slow", function() {
                                        $j('.frame-4').delay(3000).fadeOut('slow', function() {
                                            //Tile
                                            $j('#tile-wrap').fadeIn('slow');
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});​

スクリプトの最初の部分は問題なく動作します ( のクラスを追加し.hideます)。しかし、その後は何も発火したり機能したりしません。エラーが表示されず、スクリプトにエラーがあると想定しているため、行き詰まっています。

これは、残りのコードを含むスクリプトのフィドルです。

注: 私は JS の記述についてあまり詳しくありません。スクリプトを改善する方法を歓迎します。例を提供してください。

FIDDLE NOTE Firebug は、フィドルの実行時にいくつかのエラーを表示します。これらのエラーは Fiddle ページのみにあり、コードやページではなく jsFiddle に関連していると思います。

私が達成しようとしていること

私が望むのは、各アイテム（クラスまたはIDでリストされている）に対して、それらをフェードインし、遅延後にフェードアウトし、最後のdivでフェードインしてそのままにすることです。

4

3 に答える 3

2

これは動作します、http://jsfiddle.net/VNfT2/2/。addclass のコールバックはありません。そうは言っても。あああああああああああああああああああああああああああああああああああああああああああ！！！これは正しい方法ではありません。ヒント: 10 個以上表示される場合 }); 続けて、立ち止まって深呼吸してください。:)

編集：これを行うためのプラグインが何百もあります（jqueryスライドショーのGoogle）。しかし、手動でやりたい場合は...これを見てください：フィドル：http://jsfiddle.net/VNfT2/5/

于 2012-09-09T00:36:37.417 に答える
1

http://jsfiddle.net/VNfT2/4/を参照してください

 var $j = jQuery.noConflict();

 $j(document).ready(function() {
//Hide All Elements
    $j(".frame-1, .frame-2, .frame-3, .frame-4, #tile-wrap, #copyright")
        .addClass("hide")
//Change Color of "Frames"
        .addClass("color");
//Frame 1
    $j(".frame-1").fadeIn("slow", function() {
     $j(this).delay(3000).fadeOut('slow', function() {
//Frame 2
      $j(".frame-2").fadeIn("slow", function() {
       $j(this).delay(3000).fadeOut('slow', function() {
//Frame 3        
        $j(".frame-3").fadeIn("slow", function() {
         $j(this).delay(3000).fadeOut('slow', function() {
//Frame 4
          $j(".frame-4").fadeIn("slow", function() {
           $j(this).delay(3000).fadeOut('slow', function() {
//Tile
            $j(this).fadeIn('slow');
           });
          });   
         });
        });
       });
      });
     });
    });
});

私のコメントで言ったようaddClassに、文字列（クラス）またはクラスを返す関数で呼び出すことができます。しかし、文字列と関数ではできません... api.jquery.com/addClassを参照してください

また、コールバック関数では を使用する必要があります$(this)。この方法では要素を再度検索しないため、高速です。

于 2012-09-09T00:40:56.900 に答える
1

2 番目の引数として指定されているため、コールバックが呼び出されないという問題。

addClass( className )

説明: 一致した要素のセットのそれぞれに、指定されたクラスを追加します。

.addClass( className )
.addClass( function(index, currentClass) )

いくつかのヒントを次に示します。

1)

別の関数内にネストされた/コールバック関数を 1 つだけ持つようにしてください。

ヒント 4 を参照してから、関数fadeElementsInThenOutの例を参照してください。

2)

検索を繰り返さないでください。

古いコード:

// Let's forget about the callbacks for now
$j(".frame-1, .frame-2, .frame-3, .frame-4, #tile-wrap, #copyright").addClass("hide");
$j(".frame-1, .frame-2, .frame-3, .frame-4").addClass("color");

新しいコード:

$j(".frame-1, .frame-2, .frame-3, .frame-4").addClass("color hide");
$j("#tile-wrap, #copyright").addClass("color");

3)

$(this)コールバック内で同じ要素を参照するために使用します。

古いコード:

$j(".frame-4").fadeIn("slow", function () {
    $j('.frame-4').delay(3000).fadeOut('slow', function () {
        //...
    });
});

新しいコード:

$j(".frame-4").fadeIn("slow", function () {
    $j(this).delay(3000).fadeOut('slow', function () {
        //...
    });
});

4)

必要がない場合は、コールバックを使用しないでください。

古いコード:

$j(".frame-4").fadeIn("slow", function () {
    $j(this).delay(3000).fadeOut('slow', function () {
        //...
    });
});

新しいコード:

$j(".frame-4").fadeIn("slow").delay(3000).fadeOut('slow', function () {
    //...
});

問題を修正するために書き直したコードを次に示します。

var $j = jQuery.noConflict();
$j(function () {
    var frames = [ ".frame-4", ".frame-3", ".frame-2", ".frame-1" ];
    var fadeElementsInThenOut = function( els, lastCallback ){
        var el = els.pop();
        if( el ){
            $j(el).fadeIn("slow").delay(3000).fadeOut('slow', function(){
                fadeElementsInThenOut( els, lastCallback );
            });
        }else{
            lastCallback();
        }
    };

    $j( frames.join( ", " ) ).addClass("color hide");
    $j("#tile-wrap, #copyright").addClass("color");
    fadeElementsInThenOut( frames, function(){
        $j('#tile-wrap').fadeIn('slow');
    });
});
于 2012-09-09T00:57:28.233 に答える