Изменить текст в анимации

Question

Как вы можете видеть здесь, я пытаюсь показать обратный отсчет:

$('#countdown').text(3).fadeIn(4000).delay(500).fadeOut(4000) 
       .text(2).fadeIn(4000).delay(5000).fadeOut(4000) 
       .text(1).fadeIn(4000).delay(5000).fadeOut(4000); 

https://jsfiddle.net/ns1ay9x6/

Я не понимаю, почему анимация начинается с 1 вместо 3. Что я не так? Thanks

Answer 1

Использование complete методов обратного вызова fadeOut() для установки текста. поскольку .delay() работает только с методами jQuery, которые используют очередь анимации на одном объекте DOM и text() не используют очередь.

$('#countdown') 
    .text(3) 
    .fadeIn(4000) 
    .delay(500) 
    .fadeOut(4000, function() { 
     $(this) 
      .text(2); 
    }) 
    .fadeIn(4000) 
    .delay(5000) 
    .fadeOut(4000, function() { 
     $(this) 
      .text(1); 
    }) 
    .fadeIn(4000) 
    .delay(5000) 
    .fadeOut(4000); 

DEMO