Блог

Главная - Вопросы по программированию - Единая очередь для элементов jQuery animate()

Единая очередь для элементов jQuery animate()

#javascript #jquery

#javascript #jquery

Вопрос:

По умолчанию очередь jQuery, которая создается для animate (), выполняется для каждого элемента, мне интересно, есть ли способ создать единую очередь для всех анимаций, выполняемых с помощью animate ()? Т.Е. одновременно должна выполняться только одна анимация

Ответ №1:

Вы могли бы сделать это с вашей собственной пользовательской очередью для одного элемента, используя queue:

http://jsfiddle.net/jRawX/2/

 $(function(){

    $('#myQueue')
        .queue('myQueue',function(next){
            $('#t1').animate({left: 100}, 
                            {duration: 1000, 
                             queue: false,
                             complete: next
                            })
        })
        .queue('myQueue',function(next){
            $('#t2').animate({left: 100}, 
                            {duration:1000, 
                             queue:false,
                             complete: next})
        })
        /* etc. */
        .dequeue('myQueue')
})

Комментарии:

1. Ближе всего к тому, чего я пытаюсь достичь

2. Кстати, в этом случае вы можете удалить queue: false (редакция 2 этого ответа)

3. @Jeffery это зависит. Если вы хотите, чтобы другие анимации выполнялись вне этой очереди, тогда вы хотите queue:false

4. «одновременно должна выполняться только одна анимация» — не похоже, что со мной происходят другие анимации

5. Это нормально, мне все еще больше нравится этот способ в качестве общего решения, поскольку очередь действует независимо от других очередей.

Ответ №2:

.animate() имеет queue опцию, которая разрешает только один эффект на элемент:

очередь: логическое значение, указывающее, следует ли помещать анимацию в очередь эффектов. Если значение равно false, анимация начнется немедленно.

Использование

 $('div').animate({ height: 50, queue: false });

Комментарии:

1. Разве это не удаляет очередь все вместе, а не создает одну для всех элементов?

Ответ №3:

Что-то вроде этого:

 $(someElement) // could also be a plain object, e.g. $({})
    .queue('customQueue', function (next) {
        first.animate({ ... }, function () {
            // when the animation is complete, call next() for customQueue
            next();
        });
    })
    .queue('customQueue', function (next) {
        second.animate({ ... }, function () {
            // when the animation is complete, call next() for customQueue
            next();
        });
    })
    // add more animations, then
    .dequeue('customQueue');