Question

I’m using http://tutorialzine.com/2011/12/countdown-jquery/ which animates the numbers down and fades to opacity 0.

Edit. Added 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');
        });

I’m doing two examples of different animations for timers on the same page, one with animations and one without. Having a hard time figuring out how to turn off animation effects on only the second example (which uses a different class).

Here’s whats initializing in 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);
    }
  });

Anyone know if this is possible?

Answer 1

It’s easy to do but requires a small change to the code for the plugin your using so it accepts a duration configuration option. First, add a default duration:

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

Then pass the options object into the switchDigit function (where the animations happen)

    // 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);
    }

and

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

Then make sure the animate calls actually use the passed duration option:

    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');
        });

Then you can do this:

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

Here’s the whole thing as a jsFiddle.