Либо jQuery addClass прерывает задержку, либо задержка jQuery прерывает переход CSS, либо оба значения

Question

Я сделал два div, которые скользят в и из видимости после нажатия кнопки, добавляя и удаляя классы с jQuery и переходом CSS. В этой скрипке нажатие одной из кнопок приводит к сдвигу деления на 0,4 секунды: http://jsfiddle.net/uo14dowo/4/

Но когда я добавил несколько delays, переход 0,4 с внезапно стал мгновенным: ни задержка, ни переход теперь не работают. http://jsfiddle.net/uo14dowo/3/

Почему это?

Answer 1

show и hide не являются анимационные методы по умолчанию, но вы можете сделать их так, передавая параметр duration - в этом случае, число 0:

var d= 400; 
$("#btn-1").click(function() { 
    $("#left").addClass('show').removeClass('clear').delay(d).show(0); 
    $("#right").addClass('clear').removeClass('show').delay(d).hide(0); 
}); 

$("#btn-2").click(function() { 
    $("#left").removeClass('show').addClass('clear').delay(d).hide(0); 
    $("#right").removeClass('clear').addClass('show').delay(d).show(0); 
}); 

Fiddle

Answer 2

.delay() только работает с анимацией способ. show() не является методом анимации. Однако, если у поставщика есть значение, чтобы показать его, оно делает его анимированным.

Try:

.delay(400).show(0) 

Answer 3

Из документации :

Добавлен JQuery в версии 1.4, метод .delay() позволяет задержать исполнения функций, которые следуют за ним в очереди. Его можно использовать со стандартной очередью эффектов или с пользовательской очередью. Только последующие события в очереди задерживаются; , например, это не будет задерживать формы без аргументов .show() или .hide(), которые не используют очередь эффектов.

Here Я изменил вашу скрипку, удаляя show и hide звонки, и вы можете увидеть, что переходы не зависят от задержек.