Question

我想创建一个动画链，而我正在循环一组元素;当第一步的动画完成时，调用下一个循环步骤。链是这样的：

第1步（在元素A上工作）
改变背景颜色
改变字体颜色
（ - ＆gt;火步骤2）
再次改变背景颜色
再次更改字体颜色

第2步（在元素B上工作）
改变背景颜色
改变字体颜色
等一秒钟再次改变背景颜色
再次更改字体颜色
- ＆GT; fire 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'）”仅在所有管道上编写..但动画都没有开始！

有什么问题？

（对不起我糟糕的英语，你可以理解我正在尝试编码的内容）。

Answer 1

问题是pipe()只有在Deferred解析后才被调用到链中的下一个链接。但是你使用pipe()作为第一件事。它没有被调用，因为它正在等待这个问题在下降之前解决。

我试图理解这些事情时遇到了同样的问题。这看起来有点违反直觉，取决于你接近这个东西的方式，但是你需要在调用管道之前resolve() dfr function animation() { return $.Deferred(function(dfr) { dfr.resolve(); dfr.pipe(function() { ...。代码然后适合我。这是改变：

{{1}}

jQuery延迟链

1 个答案: