Question

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.log("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.log("Coutdown done!")  });
  }
})

jQuery：动画完成后执行

0 个答案: