jQuery Отложенная цепочка - PullRequest
Новая
       19

jQuery Отложенная цепочка

1 голос
/ 27 октября 2011

Я хочу создать анимационную цепочку, пока я зацикливаюсь на наборе элементов;следующий шаг цикла вызывается после завершения анимации первого шага.Цепочка выглядит примерно так:

Шаг 1 (работа с элементом A)
изменение цвета фона
изменение цвета шрифта
(-> fire Step 2)
снова изменить цвет фона
изменить цвет шрифта снова

Шаг 2 (работа с элементом B)
изменить цвет фона
изменить цвет шрифта
ждать1 секунда
снова изменить цвет фона
изменить цвет шрифта снова
-> fire resol ()

Я написал это: 

<!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')" был написан только на всех каналах ... но анимация не запускается!

Что не так?

(извините за мой ужасный английский, вы можете понять, что я пытаюсь кодировать).

1 Ответ

1 голос
/ 06 марта 2012

Проблема в том, что pipe() вызывается только для следующего звена в цепочке после того, как его Deferred было разрешено. Но вы используете pipe() как самое первое. Его не вызывают, потому что он ждет решения, прежде чем идти по трубе.

У меня была та же проблема, пытаясь понять эти вещи. Полагаю, это немного нелогично, в зависимости от того, как вы подходите к этому, но вам нужно resolve() ваш dfr, прежде чем вызывать pipe Код тогда работает для меня. Вот изменение: 

            function animation() {
                return $.Deferred(function(dfr) {
                    dfr.resolve();
                    dfr.pipe(function() {
                        ...
...