0

ユーザーがボタンを押して次の画像に移動したときに、画像のトランジションをいくつか処理しています。非常に狭い複数の画像が隣り合っている場合、それらの画像はすべて同時に遷移します。そのため、画像の幅を確認し、細いものを配列に追加してから、配列内の各オブジェクトでトランジションを実行します。配列内の各画像のアニメーション間に少し遅延を作成したかったので、1 秒のタイムアウト後に jQuery.animate を実行しようとしています。

成功せずにタイムアウトを機能させようとした方法は次のとおりです。

1.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

2.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        function tempTransition() {
            set[i].transitionOut( $('#gallery'), 562 );
        }
        setTimeout(tempTransition, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

3.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout('function() { set[i].transitionOut($("#gallery"), 562) }', 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

transitionOut():

jQuery.fn.transitionOut = function(parent, height) {
    this.animate({
        height: '0',
        top: height + 'px'
    }, function() {
        $(this).remove();
    });
}

CMSのクロージャーの例を使用して動作させました。しかし、今、私は新しい問題に直面しています。トランジションは 2 番目のイメージでのみ発生します。3 つの画像がある場合、アニメーション画像 1、遅延、アニメーション画像 2、アニメーション画像 3 になります。2 と 3 の間に遅延はありません。

新しいコードは次のとおりです。

for (i=0; i < set.length; i++) {
    (function(i) {
        if (i != 0) {

            function tempTransition() {
                set[i].transitionOut( $('#gallery'), 562 );
            }
            setTimeout(tempTransition, 200);
        } else {
            set[i].transitionOut( $('#gallery'), 562 );
        }
    })(i);
}
4

3 に答える 3

3

あなたのコードを見ると、あなたにはさらに別のクロージャーの問題があると思います。おそらく、人々がループやネストされた関数を操作するときに私が見た中で最も一般的な問題です。

コールバック関数が参照するi変数は同じであり（JavaScriptには関数スコープのみがあり、ブロックスコープはないため）、これらの関数が非同期で実行されるまでに、ループはすでに終了しており、変数にはすべての場合が含まれます使用される場所。setTimeoutiset.length - 1setTimeout

いつものように、i別のクロージャーを使用して変数をキャプチャしてみてください。

for (var i=0; i < set.length; i++) {
  (function (i) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
  })(i);
}
于 2009-11-30T04:10:52.867 に答える
0

タイムアウトの使用は、時限アニメーション/効果に関しては厄介なことです。

私はあなたのコードをテストしませんでしたが、それを閲覧することで、あなたがsetTimeoutそれらをクリアするために何も使用していないことに気付きました.

「遅延」中にユーザーがイベントをトリガーするとどうなりますか? それを管理するためにも何かを実装する必要があります。

申し訳ありませんが、おそらく後でもっと時間があるか、誰かがより洗練された解決策を見つけたときに、あなたに答えることはできません.

于 2009-11-30T02:49:51.847 に答える
0

jquery fadeOut http://docs.jquery.com/Effects/fadeOutでは、fadeOut が終了したときに実行できる関数であるコールバックを作成できます。したがって、必要に応じてフェードを連鎖させて、1 つのフェードが終了すると次のフェードを呼び出すことができます。それがあなたが探しているものではない場合、私はあなたの質問を誤解している可能性があります.

また、例 3 では、このように記述し、setTimeout に関数定義を渡さないで、何もしないようにしたいと思います。

setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);
于 2009-11-30T03:02:37.047 に答える