jQuery метод .dequeue()

Определение и применение

jQuery метод .dequeue() начинает выполнение следующей функции в очереди для выбранных элементов. Когда вызывается метод .dequeue() следующая функция, находящаяся в очереди удаляется из нее, а затем выполняется.

Каждый элемент может иметь от одной до нескольких очередей функций, присоединенных к нему jQuery. В большинстве приложений используется только одна очередь (называемая "fx"). Очереди позволяют асинхронно вызывать последовательность действий над элементом без остановки выполнения программы. Типичным примером этого является вызов нескольких методов анимации для элемента подряд (например, скрытие элемента, а затем отображение, длина очереди анимаций в этом случае составит равной двум).

jQuery синтаксис:

Синтаксис 1.2:

$( selector ).dequeue()
$( selector ).dequeue( queueName ) // с указанием имени очереди

queueName - String

Добавлен в версии jQuery

Значения параметров

Пример использования

Рассмотрим пример в котором с помощью метода .stop() мы будем останавливать элемент в зависимости от его имени очереди:

Пример использования jQuery метода .stop (остановка элемента с определенной очередью)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button class="stop">stop first</button>
<button class="stop2">stop second</button>
<button class="stop3">stop all</button>

<div class="first">first</div>
<div class="second">second</div>

main.js

JavaScript

$(document).ready(function () {
    first()
    second()

    $('.first').dequeue('myElement')
    $('.second').dequeue('myElement2')

    function first() {
        $('.first').animate(
            { width: '90%' },
            {
                queue: 'myElement',
                duration: 1000,
                complete: function () {
                    $(this).animate(
                        { width: '80px' },
                        {
                            queue: 'myElement',
                            complete: function () {
                                first()
                                $('.first').dequeue('myElement')
                            },
                        }
                    )
                },
            }
        )
    }

    function second() {
        $('.second').animate(
            { width: '90%' },
            {
                queue: 'myElement2',
                duration: 1000,
                complete: function () {
                    $(this).animate(
                        { width: '80px' },
                        {
                            queue: 'myElement2',
                            complete: function () {
                                second()
                                $('.second').dequeue('myElement2')
                            },
                        }
                    )
                },
            }
        )
    }
    $('.first').click(function () {
        if ($(this).is(':animated')) {
            return
        } else {
            first()
            $('.first').dequeue('myElement')
        }
    })
    $('.second').click(function () {
        if ($(this).is(':animated')) {
            return
        } else {
            second()
            $('.second').dequeue('myElement2')
        }
    })
    $('.stop').click(function () {
        $('div').stop('myElement')
    })

    $('.stop2').click(function () {
        $('div').stop('myElement2')
    })
    $('.stop3').click(function () {
        $('div').stop()
    })
})

style.css

CSS

div {
    width: 80px;
    height: 80px;
    border: 2px solid red;
    margin-top: 50px;
}

В этом примере мы разместили в документе два элемента <div>, которым с помощью метода .animate() анимируем увеличение и уменьшение ширины элемента бесконечно в цикле с помощью функций обратного вызова. Отличие между анимациями заключается только в том, что для элементов назначаются различные имена очередей. Обратите внимание на важный момент, что когда анимации назначается имя очереди, то она не запускается в автоматическом режиме, а запускается с помощью метода dequeue(), который мы использовали при загрузке документа, после того как были вызваны функции, которые добавили наши анимации в очередь.

Кроме того, мы разместили в документе три кнопки (элементы <button>), для каждой назначили обработчик события "click" (клик левой кнопкой мыши):

• При нажатии на элемент с классом stop вызываем функцию, которая с помощью метода .stop() останавливает анимацию у выбранных элементов <div> у которых имя очереди анимации myElement.
• При нажатии на элемент с классом stop2 вызываем функцию, которая с помощью метода .stop() останавливает анимацию у выбранных элементов <div> у которых имя очереди анимации myElement2.
• При нажатии на элемент с классом stop3 вызываем функцию, которая с помощью метода .stop() останавливает анимацию у всех выбранных элементов <div>.

Для возможности возобновления анимации (в этом примере анимация всегда возобновляется с увеличения элемента) мы задали функции, которые срабатывают при нажатии на конкретный элемент <div>. Обратите внимание, что при нажатии на элемент происходит проверка того анимируется ли элемент в настоящее время.