0

私はJavascriptは初めてですが、プログラミングは初めてです。fadeOut次のような jQuery オブジェクトを呼び出します。

$(x).fadeOut('fast');

他にもフェードアウトしてフェードインするものがありますが、それらはお互いに待つ必要があり、どれだけの人がこれを行っているかは必ずしもわかりません. xフェードインまたはフェードアウトするアイテムを含む配列の文字列です。私の最初の試みでは、次のfadeOutようにコールバック関数を使用しました。

$(x).fadeOut('fast', function(){ foo(modifiedArray); })

必要なメソッドはどこfooにあり、 modifiedArray は配列マイナスxです。それでもまだ待たなかったので、次に試しました：

$(x).fadeOut('fast');
while( $(x).css('display') != 'none' ){}
foo(modifiedArray);

しかし、ループは決して終わりません。foo(modifiedArray)再度呼び出す前にアニメーションを待機させるにはどうすればよいですか?

編集：ここに完全なコードがあります

function animateElements(elements){
if (elements.length == 1){
    var x = elements[0];
    $(x).fadeIn('slow');
}
else{
    var x = elements.pop();
    $(x).fadeOut('fast');
    while(  $(x).css('display') != 'none' ){}
    animateElements(elements);
}
}
4

4 に答える 4

3

ここを参照してください: http://jsfiddle.net/3cn3z/3/

function sequentialFade(items, duration) {
    var arr = 'shift' in items ? items : items.get();
    var item = arr.shift();

    $(item).fadeOut(duration, function(){
        sequentialFade(arr, duration);
    });
}

sequentialFade($("div"), "slow");

これについて説明する必要があると思われる場合はお知らせください。

これは、http: //jsfiddle.net/3cn3z/1/のように小さな jQuery プラグインとして記述することもできます。

(function($) {
    $.fn.seqFade = function(duration) {
        var items = this.get();

        (function fadeStep(){
            var item = items.shift();
            $(item).fadeOut(duration, fadeStep);
        })();

        return this;
    };
})(jQuery);

そして次のように使用されます：

$("div").seqFade("slow");

さらに一歩進めるために、組み込みの jQuery アニメーション関数を使用するようにプラグインを一般化できます: http://jsfiddle.net/3cn3z/5/

(function($) {
    $.fn.seqAnim = function(animFunc, duration, callback) {
        var items = this.get();
        var me = this;
        (function animStep(){
            var item = items.shift();

            if (item == undefined && callback != undefined)
                callback.call(me)
            else
                $(item)[animFunc](duration, animStep);
        })();

        return me;
    };
})(jQuery);

次のように使用します。

$("div").delay(500).seqAnim("slideToggle", "slow", function(){
    this.delay(500).seqAnim("fadeIn", 500);
});

</p>

于 2012-11-27T17:58:22.070 に答える
1

コードを次のように修正しました：

    function animateElements(elements) {
        if (elements.length == 1) {
            var x = elements[0];
            $(x).fadeOut('slow');  // Should this be fade out?
        }
        else {
            var x = elements.pop();
            $(x).fadeOut('slow', function () { animateElements(elements) });
        }
    }

コードには3つの問題があります。まず、コールバック関数ではなくループを使用しています。次に、コールバック関数は、匿名であっても関数である必要があります。第三に、あなたはいつFadeIn()の代わりに持っています。fadeOut()length == 1

于 2012-11-27T18:12:16.380 に答える
1

完全を期すために。コードでは、次のことを修正できます。

  1. .fadeIn()の代わりに使用してください.fadeOut()。

    $(x).fadeIn('slow');
  ---^---

  2. 右から左ではなく、左から右に配列を調べる.shift()代わりに、を使用することをお勧めします。.pop()

    var x = elements.pop();
              ---^---

  3. .fadeOut()要素のスタイルを強制的にチェックすることを回避する完全なコールバックの再帰ステップを呼び出します。

    $(x).fadeOut('fast');
  ---^---
while(  $(x).css('display') != 'none' ){}
animateElements(elements);

  4. elements.length == 0ベースケースとして使用します。これにより、読みやすさが向上します。

    if (elements.length == 1) {
  --^--

最後に、コードは次のようになります。

function animateElements(elements) {
  if (elements.length) {
    var x = elements.shift();
    $(x).fadeOut('fast', function(){
      animateElements(elements);
    });
  }
}

ライブでご覧ください。

于 2012-11-27T18:12:36.973 に答える
0

これを試して：

function animateElements(elements) {
    if (elements.length == 1) {
        var x = elements[0];
        $(x).fadeIn('slow');
    }
    else {
        var x = elements.pop();
        $(x).fadeOut('fast', function() {
            animateElements(elements);
        });
    }
}

デモはこちら

于 2012-11-27T18:25:01.473 に答える