在应用dequeue()之前，多个动画不会在jQuery queue()上运行，为什么呢?

multiple animations do not run on using jQuery queue() until applied dequeue(), why so?

本文关键字：jQuery queue 运行 为什么呢 dequeue 应用 之前 动画      更新时间：2023-09-26

当我尝试调用多个css动画使用jQuery queue()函数像这样-

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

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

BUT当我在上面的代码中添加'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>

谁能解释一个例子，为什么它不工作之前，但工作后，当添加dequeue。因为我无法理解在这里使用dequeue的意义，因为我已经给出了延迟

必须为每个排队的元素调用Dequeue(直接或通过next回调)，以便处理队列中的下一个项目。队列附加到每个元素，因此一些队列不会相互干扰。实际添加第二个项目的唯一时间是在最后一个队列中，即.text-enjoy。对next()的最后一次调用将取消最后一个函数的队列，但该函数永远不会进入(在.text-enjoy上等待队列)

在第一个版本中，在.addClass('anim-enjoy-out')之后添加dequeue也会导致下一个队列被处理。为了清洁起见，应该清除所有队列，但假设让初稿运行的简短解决方案是:

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

一个很好的解释可以在这里找到

edit为了清楚起见，下面是这样的:

    $(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
                    });
                });
            });
    });
相关文章：