JQuery задержка кажется неправильным

Question

Я хочу, чтобы один div исчез, чтобы потом была короткая пауза, а затем для другого div.

Это моя попытка, но она не работает. Анимация затухания начинается до завершения затухания.

    $('.nav .filters').fadeOut('200');
    $('.nav .map-r').delay('300').fadeIn('200');

Что действительно странно, так это нормально работать, если я делаю каждую анимацию в 10 раз длиннее:

    $('.nav .filters').fadeOut('2000');
    $('.nav .map-r').delay('3000').fadeIn('2000');

Answer 1

Поскольку это, я думаю, ответ, я просто скопировал и вставил свой комментарий выше:

"Принимает ли fadeOut () числа в качестве аргументов вместо строковых литералов, представляющих числа? Попробуйте удалить одинарные кавычки. Да, действительно, одинарные кавычки предназначены только для« быстрых »,« медленных »и т. П., В противном случае аргумент должен быть числом без кавычек. "

То же самое относится к fadeIn () и delay (), toggle () и т. Д. Вы можете назвать это соглашением jQuery.

Answer 2

$('.nav .filters').fadeOut(200, function(){$('.nav .map-r').delay(300).fadeIn(200);});

Answer 3

Вы должны поместить fadeIn () в обратный вызов fadeOut () , чтобы он выполнялся после завершения fadeOut

$('.nav .filters').fadeOut(200, function(){
   $('.nav .map-r').delay(300).fadeIn(200);
   //i'm not sure this works, if it doesn't just use setTimeout()
   //setTimeout(function(){$('.nav .map-r').fadeIn(200)}, 300);
});