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 VOTE！

主类具有最高的z-index。

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

Answer 2

首先，您需要确保在包含jquery脚本之后找到您的脚本。您可以将它们添加到html的主题部分：

<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
        $('window').ready(function() {
        ...

然后，如果你想让每个效果都在前一个之后发生，你需要链接它们。但是，您可能希望隐藏所有元素，如下所示：

<script>
  $('window').ready(function() {
    $('.three').hide();
    $('.two').hide();
    $('.one').hide();
    $('.oneone').hide();
    $('.vote').hide();

    $('.three').fadeIn('fast', '', function() {
      $('.three').fadeOut('slow', '', function() {
        /* chain the rest of the events...*/
      });
    });
  });
</script>

用动画在jQuery中倒数

2 个答案:

DEMO