Как отключить .animate () для определенного элемента

Question

Я использую http://tutorialzine.com/2011/12/countdown-jquery/, который оживляет числа вниз и исчезает до непрозрачности 0.

Edit. Добавлена ​​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 ready.

  $('#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);

Затем передайте объект параметров в функцию 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){

Затем убедитесь, что вызовы animate действительно используют переданный параметр 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);
}