用动画在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指数.

Answer 1

试着用这个概念来做closure,

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