Question

我正在使用http://tutorialzine.com/2011/12/countdown-jquery/向下设置动画数字并淡化为不透明度0。

编辑。添加了jsFiddle http://jsfiddle.net/Mw4j2/

        // The .static class is added when the animation
    // completes. This makes it run smoother.

    digit
        .before(replacement)
        .removeClass('static')
        .animate({opacity:0},'fast',function(){
            digit.remove();
        })

    replacement
        .delay(100)
        .animate({top:0,opacity:1},'fast',function(){
            replacement.addClass('static');
        });

我在同一页面上为计时器做了两个不同的动画示例，一个是动画，另一个没有。很难搞清楚如何仅在第二个例子（使用不同的类）上关闭动画效果。

这是在dom准备好的初始化。

  $('#countdown').countdown({
    timestamp : ts,
    callback  : function(days, hours, minutes, seconds){

      var message = "";

      // message += days + " day" + ( days==1 ? '':'s' ) + ", ";
      message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
      message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
      message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";

      if(newYear){
        message += "left until the new year!";
      }
      else {
        message += "left to 10 days from now!";
      }

      note.html(message);
    }
  });


  // Second Timer Example

  $('.countdownSecond').countdown({
    timestamp : ts,
    callback  : function(days, hours, minutes, seconds){

      var message = "";

      // message += days + " day" + ( days==1 ? '':'s' ) + ", ";
      message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
      message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
      message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";

      if(newYear){
        message += "left until the new year!";
      }
      else {
        message += "left to 10 days from now!";
      }

      note.html(message);
    }
  });

任何人都知道这是否可行？

Answer 1

这很容易，但需要对您使用的插件的代码进行少量更改，因此它接受duration配置选项。首先，添加默认duration：

    var options = $.extend({
        callback    : function(){},
        timestamp   : 0,
        duration    : 'fast'
    },prop);

然后将options对象传递给switchDigit函数（动画发生的地方）

    // This function updates two digit positions at once
    function updateDuo(minor,major,value){
        switchDigit(positions.eq(minor),Math.floor(value/10)%10, options);
        switchDigit(positions.eq(major),value%10, options);
    }

和

    // Creates an animated transition between the two numbers
    function switchDigit(position,number,options){

然后确保动画调用实际上使用传递的duration选项：

    digit
        .before(replacement)
        .removeClass('static')
        .animate({top:'2.5em',opacity:0},options.duration,function(){
            digit.remove();
        })

    replacement
        .delay(100)
        .animate({top:0,opacity:1},options.duration,function(){
            replacement.addClass('static');
        });

然后你可以这样做：

  $('.countdownSecond').countdown({
    timestamp : ts,
    duration: 0, // animation runs instantly, change happens without transition effects.
    callback  : function(days, hours, minutes, seconds){
      // do stuff
    }
  });

以下是jsFiddle。

Answer 2

我的领导帮助了我。

为插件添加了useAnimation选项。

    $.fn.countdown = function(prop){

    var options = $.extend({
        callback    : function(){},
        timestamp   : 0,
        useAnimation: true
    },prop);

然后在第63行添加选项

    function updateDuo(minor,major,value){
        switchDigit(positions.eq(minor),Math.floor(value/10)%10, options);
        switchDigit(positions.eq(major),value%10, options);
    }

    return this;
};

和

        // The .static class is added when the animation
    // completes. This makes it run smoother.
    if (options.useAnimation){
    digit
        .before(replacement)
        .removeClass('static')
        .animate({opacity:0},'fast',function(){
            digit.remove();
        })

    replacement
        .delay(100)
        .animate({top:0,opacity:1},'fast',function(){
            replacement.addClass('static');
        });
    } else {
        digit
        .before(replacement)
        .removeClass('static')
        .remove()
    replacement
        .css({top: 0,opacity:1}).addClass('static')
    }

然后将新选项传递给dom ready中的函数

  $('.countdownSecond').countdown({
timestamp : ts,
useAnimation: false,
callback  : function(days, hours, minutes, seconds){

  var message = "";

  // message += days + " day" + ( days==1 ? '':'s' ) + ", ";
  message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
  message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
  message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";

  if(newYear){
    message += "left until the new year!";
  }
  else {
    message += "left to 10 days from now!";
  }

  note.html(message);
}

如何在某个元素上关闭.animate（）

2 个答案: