javascript - 使用动画在 jQuery 中倒计时

Question

我正在尝试制作一个可以为倒计时设置动画的小插件。

但是，由于某种原因，它无法正常工作。这是代码:

$(window).onload(function() {
  $('.three').fadeIn('fast');
  $('.three').fadeOut('slow');
  $('.two').fadeIn('fast');
  $('.two').fadeOut('slow');
  $('.one').fadeIn('fast');
  $('.one').fadeOut('slow');
  $('.oneone').fadeIn('fast');
  $('.oneone').fadeOut('slot');
  $('.vote').fadeIn('slow');
  $('.vote').fadeOut('slow');
  $('html').effect('shake');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div>
  <div class="three">3</div>
  <div class="two">2</div>
  <div class="one">1</div>
  <div class="oneone">0.5</div>
  <div class="vote">VOTE!</div>
</div>

我希望这个倒计时出现在窗口加载时，并使用我要设计的 CSS。 但首先我想倒计时: 3个 2个 1个 0.5 投票!

主类将具有最高的 z-index。

Answer 1

尝试使用闭包来实现这个概念，

var divs = $("div[class]");
var scope = null;

for(var i=0;i< divs.length;i++){
  scope = function(x){
    setTimeout(function(){
      x.show("slow").prev('div').hide("slow");
    },i * 2000);
  };

  scope(divs.eq(i));
}

DEMO