JQuery: выполнить после завершения анимации

Как мне запустить flipclock после завершения анимации fadeIn?

Я хочу начать и показать, может быть, даже исчезнут часы, когда моя анимация fadeIn () для видео будет завершена. В настоящее время он затухает видео, но когда я добавил queue (), который я прочитал, это был рекомендуемый вариант для достижения этого, мой код сломался.

Я думаю, что мой общий синтаксис неверен, поэтому возникает моя ошибка? (или, может быть, я просто ошибаюсь.

Это мой код:

 var video= document.getElementById('vid');
  var overlay= document.getElementById('overlay');
  var timer;
  var clock;

  // Hides recorded video until timer reaches 0
  // TODO: Should start recording once video appears fully on screen not while being hidden.
  $("#recording").hide();

  // Counter;
  function countdown(seconds, callback){
    timer = setInterval(function(){
      document.getElementById("coutdownText").innerHTML = "Recording will start automatically in: " + seconds;

      if (seconds == 0){
        $("#vid").show();
        setTimeout(function() {$("#vid").fadeOut(2500);}, 0)
        overlay.style.visibility ='hidden';
        // console.info("Worked the seconds is:" + seconds)
        setTimeout(function() {$("#recording").fadeIn(2500).queue(function(next){
          // FlipClock : My problem occurs when I try to use queue
          $(document).ready(function() {

            // Instantiate a counter
            clock = new FlipClock($('.clock'), 600, {
              clockFace: 'MinuteCounter',
              autoStart: true,
              countdown: true
            });

          });
          next();
        }));}, 3000)

      }

      seconds-- || (clearInterval(timer), callback());
    }, 1000);

  }

  overlay.style.visibility = "hidden";
  // Check for when PreRecorded video ends.
  video.addEventListener('timeupdate', function() {
    if (video.ended){
      overlay.style.visibility ='visible';
      countdown(10, function(){  console.info("Coutdown done!")  });
  }
})