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 回答