1

一連の要素をループしているときに、アニメーション チェーンを作成したいと考えています。最初のステップのアニメーションが完了すると、次のループ ステップが呼び出されます。チェーンは次のようなものです。

ステップ 1 (要素 A で作業)
背景色を
変更する フォントの色を変更する
(--> 発射 ステップ 2)
背景色を再度
変更する フォントの色を再度変更する

ステップ 2 (要素 B で作業)
背景色を
変更する フォント色を変更する
1 秒待つ
背景色を再度
変更する フォント色を再度変更する
--> resolve() を起動する

私はこれを書いた：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery Deferred</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {


                function animation() {
                    return $.Deferred(function(dfr) {
                        dfr.pipe(function() {
                            return $.Deferred(function(dfr) {
                                $.when($('#text').animate({
                                    color : '#ff0000',
                                    fontSize : '3em'
                                }, 'slow').delay(3000), $('#text').animate({
                                    color : '#ff0000',
                                    fontSize : '6em'
                                }, 2000)).then(dfr.resolve())
                            }).promise();
                        }).pipe(function() {
                            return $.Deferred(function(dfr) {
                                $.when($('#text').animate({
                                    color : '#c456fa',
                                    fontSize : '1em'
                                }, 'slow')).then(dfr.resolve())
                            }).promise();
                        })
                    }).promise();
                    }
                //}, 1500)

                var a = $.when(
                    animation()).done(function() {
                    console.log('done');
                });
            });

        </script>
    </head>
    <body>
        <p id="text">
            TEXT
        </p>
    </body>
</html>

「console.log('done')」がすべてのパイプの最後にのみ書き込まれることを望みました..しかし、アニメーションも開始しません!

なにが問題ですか？

（私のひどい英語で申し訳ありません。私がコーディングしようとしていることを理解できます）。

4

1 に答える 1

1

問題はpipe()、チェーン内の次のリンクが解決された後にのみ呼び出されるDeferredことです。しかし、あなたはpipe()最初のものとして使用しています。パイプを下る前にこれが解決されるのを待っているため、呼び出されていません。

私はこれらのことを理解しようとして同じ問題を抱えていました。私が思うに、このことにどのようにアプローチしているかによっては、少し直感に反するように思えますが、パイプを呼び出す前に必要resolve()ですdfr。その後、コードは私のために機能します。変更点は次のとおりです。

            function animation() {
                return $.Deferred(function(dfr) {
                    dfr.resolve();
                    dfr.pipe(function() {
                        ...
于 2012-03-06T07:23:29.110 に答える