Javascript 在应用了dequeue（）之前，使用jQuery queue（）不会运行多个动画，为什么会这样？

当我尝试使用jQuery queue（）函数调用多个css动画时，如下所示-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.text-hello')
                .addClass('anim-hello-in')
                .delay(1700)
                .queue(function (next) {
                    $('.text-enjoy')
                    .addClass('anim-enjoy-in')
                    .delay(6500)
                    .queue(function (next) {
                        $('.text-hello')
                        .addClass('anim-hello-out');
                        $('.text-enjoy')
                        .addClass('anim-enjoy-out')
                        .delay(100)
                        .queue(function (next) {
                            console.log('entered');
                            $('#receipt')
                            .addClass('anim-receipt-in');
                            next(); //don't forget to dequeue so that the rest of the queue can run
                        });
                    });
                });
        });
    </script>

$（文档）.ready（函数（）{
$（“.text hello”）
.addClass（'anim-hello-in'）
.延迟（1700）
.queue（函数（下一个）{
$（“.text享受”）
.addClass（'anim-previous-in'）
.延迟（6500）
.queue（函数（下一个）{
$（“.text hello”）
.addClass（'anim-hello-out'）；
$（“.text享受”）
.addClass（'anim-previous-out'）
.延迟（100）
.queue（函数（下一个）{
console.log（'entered'）；
$（“#收据”）
.addClass（“动画接收”）；
next（）；//不要忘记退出队列，以便队列的其余部分可以运行
});
});
});
});

除了最后一个队列函数外，所有序列都已成功执行，我正在控制台中打印单词“entered”。既不执行控制台，也不写入其后执行的步骤

但是当我在上面的代码中添加“dequeue（）”时（如下所示），它完美地执行了所有动画

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.text-hello')
                .addClass('anim-hello-in')
                .delay(1700, 'fx1')
                .queue('fx1', function (next) {
                    $('.text-enjoy')
                    .addClass('anim-enjoy-in')
                    .delay(6500,'fx2')
                    .queue('fx2', function (next) {
                        $('.text-hello')
                        .addClass('anim-hello-out');
                        $('.text-enjoy')
                        .addClass('anim-enjoy-out')
                        .delay(100, 'fx3')
                        .queue('fx3', function (next) {
                            console.log('in');
                            $('#receipt')
                            .addClass('anim-receipt-in');
                            next(); //don't forget to dequeue so that the rest of the queue can run
                        }).dequeue('fx3');
                    }).dequeue('fx2');
                }).dequeue('fx1');
        });
    </script> 

$（文档）.ready（函数（）{
$（“.text hello”）
.addClass（'anim-hello-in'）
.延迟（1700，“fx1”）
.queue（'fx1'，函数（下一个）{
$（“.text享受”）
.addClass（'anim-previous-in'）
.延迟（6500，'fx2'）
.queue（'fx2'，函数（下一个）{
$（“.text hello”）
.addClass（'anim-hello-out'）；
$（“.text享受”）
.addClass（'anim-previous-out'）
.延迟（100，'fx3'）
.queue（'fx3'，函数（下一个）{
console.log（'in'）；
$（“#收据”）
.addClass（“动画接收”）；
next（）；//不要忘记退出队列，以便队列的其余部分可以运行
}).dequeue（'fx3'）；
}).dequeue（'fx2'）；
}).dequeue（'fx1'）；
});

请有人举个例子解释一下，为什么它以前不起作用，但后来添加了“出列”后才起作用。当我已经给出延迟时，我无法理解在这里使用出列的含义。

必须为每个排队元素调用出列（直接或通过

next

回调），以便处理队列中的下一项。队列附加到每个元素，因此一些队列不会相互干扰。唯一一次实际添加第二项是在最后一个队列中，即添加到

。text-previous

。对next（）的最后一次调用将使最后一个函数出列，但该函数从未被输入（在

上排队等待。text-provide

）

在第一个版本中，在

.addClass（'anim-preview-out'）

之后添加一个出列也会导致处理队列中的下一个。 为了保持清洁，应清除所有队列，但假设运行第一稿的短期解决方案是：

.addClass('anim-enjoy-out')
.delay(100).dequeue()

可以找到一个很好的解释

---

编辑为清晰起见，发生以下情况：

    $(document).ready(function(){
        $('.text-hello')                               //<-- text-hello obj
            .addClass('anim-hello-in')
            .delay(1700)
            .queue(function (next) {                   //<--queue on text-hello  (1)
                $('.text-enjoy')                       //<--text-enjoy object
                .addClass('anim-enjoy-in')
                .delay(6500)
                .queue(function (next) {               //<--queue on text-enjoy (1)
                    $('.text-hello')                   //<-- text-hello obj
                    .addClass('anim-hello-out');
                    $('.text-enjoy')                   //<--text-enjoy object
                    .addClass('anim-enjoy-out')
                    .delay(100)
                    .queue(function (next) {           //<--queue on text-enjoy (2)
                        console.log('entered');
                        $('#receipt')
                        .addClass('anim-receipt-in');
                        next(); //don't forget to dequeue so that the rest of the queue can run
                    });
                });
            });
    });

$（文档）.ready（函数（）{
$（'.text hello'）//最好转到这个页面：