如何某一元素

Question

我使用http://tutorialzine.com/2011/12/countdown-jquery/這倒動畫的數量和褪色的不透明度爲0

編輯在關閉.animate（）。新增的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); 

然後通過選擇對象插入到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準備

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