Отказ от очереди jQuery не работает

Question

Я ожидаю, что 3-я анимация будет снята, но это не так, и я не знаю почемуВот демоверсия .

$('#di').animate({left:300},3000,function(){//animation callback
    $('#hello').html('1st is done');
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('2nd is done');
}).queue(function(){//queue
    $(this).animate({left:300},3000,
    function(){//animation callback
        $('#hello').html('the inside queue is done');
        $(this).dequeue();
    })
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('the last queue is done');
});

Answer 1

Работа с очередью проще всего, если вы используете аргумент next, который передается обратному вызову, но в вашем случае, я думаю, проблема в том, что вы пытаетесь вручную поставить в очередь и удалить из очереди функцию анимации, которая сама по себе возиться с очередью. Он должен работать нормально, если вы используете обычную функцию, которая не мешает с такой очередью, и вы можете использовать либо dequeue(), либо я предпочитаю использовать next():

$('#di').animate({left:300},3000,function(){//animation callback
    $('#hello').html('1st is done');
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('2nd is done');
}).queue(function(next){//queue
    $('#hello').html('the inside queue is done');
    next();
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('the last queue is done');
});

Но нет реальной причины использовать .queue и .dequeue в этом случае, так как все анимации автоматически помещаются в очередь, так что вы можете просто сделать это:

$('#di').animate({left:300},3000,function(){//animation callback
    $('#hello').html('1st is done');
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('2nd is done');
}).animate({left:300},3000, function(){//animation callback
        $('#hello').html('the inside queue is done');
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('the last queue is done');
});

Answer 2

Вам нужно подумать о порядке, в котором каждая функция может что-то добавить в очередь.

Прежде чем что-либо сможет оживить, очередь будет выглядеть следующим образом ...

animate  // left:300
callback
animate  // left:0
callback
callback via queue
animate  // left:0
callback

Имейте в виду, что все это происходит до того, как что-либо началось.

Проблема в том, что ваш dequeue добавляется в обратном вызове к анимации, которая происходит в вашем queue() обратном вызове.Это означает, что новый обратный вызов помещается в конец очереди ...

animate   // run, then automatically dequeue
callback  // run, then automatically dequeue
animate   // run, then automatically dequeue
callback  // run, then automatically dequeue
callback via queue  // run, place the new animation and callback on the end +
animate  //                                                                 |
callback //                                                                 |
                                                                            |
animate  // <---------------------------------------------------------------+
callback // The dequeue() happens in here

Таким образом, вы можете видеть, что ваша очередь заблокирована, и очередь застряла после вашего обратного вызова queue().

Answer 3

Краткий ответ: добавьте опцию queue: false к вызову animate внутри функции queue, см. this jsFiddle .

Длинный ответ с объяснением:

Ответ от @ jfriend00 почти в том смысле, что вызов animate в функции queue сам имеет дело с очередью. Поскольку @Amged попросил предоставить мне более подробную информацию, я решил заполнить пробелы в дополнение к предложению решения.

В jQuery каждый элемент может иметь набор именованных очередей. По умолчанию при вызове animate для элемента анимация попадает в очередь 'fx' этого элемента. Точно так же, вызов queue без явного имени очереди поместит функцию в очередь 'fx'.

Таким образом, происходит то, что вызов animate блокируется функцией queue.

Решение состоит в том, чтобы не ставить в очередь анимацию:

$('#di').animate({left:300},3000,function(){//animation callback
    $('#hello').html('1st is done');
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('2nd is done');
}).queue(function(){//queue
    $(this).animate({left:300}, {
        duration: 3000,
        // Don't queue the animation, otherwise it gets queued on the default
        // queue ('fx') and since we're currently running in this queue, it
        // would block
        queue: false,
        complete: function(){//animation callback
            $('#hello').html('the inside queue is done');
            $(this).dequeue();
        }
    })
}).animate({left:0},3000,function(){//animation callback
    $('#hello').html('the last queue is done');
});

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