6

自分の関数を呼び出して、終了するまで待ちます。トランジションが終了したら、次の機能を開始したいと思います。私のjsfiddlehttp://jsfiddle.net/hrm6w/をご覧ください。

console.log（ "upperfinished"）はconsole.log（ "promisefinished"）とすべてのアニメーションが終了した後に開始する必要があります。

そして、各オブジェクトのすべてのアニメーションが終了した後、次のアクション（関数）を開始したいと思います。

必要なのはpromise（）関数だけだと思いますが、これが機能しません。

どんな助けでもいただければ幸いです。

4

2 に答える 2

3

少し遊んだ後、トランジションから約束を返す必要があるようです。少し修正しましたが、結果は同じです。

この記事は、いくつかの概念を説明するのに役立ちました: http://hermanradtke.com/2011/05/12/managing-multiple-jquery-promises.html

デモ: http://jsfiddle.net/lucuma/hrm6w/5/

    (function($) {
    //Transition Out
    $.fn.ajaxTransitionOut = function() {

        var $animators = $('.animate', this);
        $animators.each(function() {
            $(this).animate({
            left: 1000,
            opacity: 0
        }, 400);
        console.log('animating');
                        });
        return $animators.promise().done(function() {
            console.log('promise finished');
        });

    };

})(jQuery);

$(document).ready(function() {
    console.log('starting');
    $.when($('#content').ajaxTransitionOut()).done(function() {
        console.log('upper finished');
    });
    console.log('ending');

});​
于 2012-06-13T01:05:40.123 に答える
1

私はそれがこれと同じくらい簡単だと思います：

(function($) {
    $.fn.ajaxTransitionOut = function() {
        return this.find('.animate').each(function() {
            $(this).animate({
                left: 500,
                opacity: 0
            }, 4000);
        });
    };
})(jQuery);
$.when($('#content').ajaxTransitionOut()).done(function() {
    $('html').css('backgroundColor','#999');
});

フィドル-http://jsfiddle.net/hrm6w/8/

プロセスをよりよく観察するために、定数とターミナルアクションを変更したことがわかります。

なぜこれが機能するのか完全には理解していませんが、選択されたすべての要素の複合promiseは、プラグインによって返されるjQueryオブジェクトに暗黙的に含まれているようです（したがって.done()、メソッドチェーンの下流で利用できるようになっています）。

これは、アニメーションを扱っており、promiseのデフォルトtypeが「fx」であるためにのみ機能すると思います（.promise（）のドキュメントを参照してください）。

編集：

または、次のようにメソッドチェーンで.when()明示的なpromiseを削除して生成することもできます。.promise()

$('#content').ajaxTransitionOut().promise().done(function() {
    $('html').css('backgroundColor','#999');
});

プラグインは同じままです。

于 2012-06-13T01:53:19.877 に答える