淡出选项

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="../js/jquery.countdown360.min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" charset="utf-8"> 
$(function(){ 
    var $btn = $('#activate'); 
    $btn.click(function(){ 
     var $this = $(this); 
     $this.attr('disabled', 'disabled').html("Activated");   
     $("#countdown").countdown360({ 
      radius  : 40, 
      seconds  : 10, 
      fontColor : '#FFFFFF', 
      autostart : false, 
      onComplete : function() { console.log('done');} 
     }).start(); 
     setTimeout(function() { 
      $this.removeAttr('disabled').html('Activate'); 
     }, 10000); 

    }); 
}); 

我已经把定时器，可以通过点击一个按钮来激活。所以我想从计时器淡出当动作完成（10秒后）....感谢您添加解决方案。接下来的问题是：如何定义取消按钮，当我点击它，我想：

• 激活按钮再次启用
• 停止倒计时

Answer 1

使用回调onComplete淡出计数器：

onComplete : function() { $("#countdown").fadeOut(); } 

参见下面代码片段例如（改为3秒钟，因为......我讨厌等待）。

$(function(){ 
 
var $btn = $('#activate'); 
 
$btn.click(function(){ 
 
    var $this = $(this); 
 
     $this.attr('disabled', 'disabled').html("Activated");   
 
    $("#countdown").countdown360({ 
 
     radius  : 40, 
 
     seconds  : 3, 
 
     fontColor : '#FFFFFF', 
 
     autostart : false, 
 
     onComplete : function() { $("#countdown").fadeOut();} 
 
    }).start(); 
 
    setTimeout(function() { 
 
      $this.removeAttr('disabled').html('Activate'); 
 
     }, 3000); 
 
       
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.jqueryscript.net/demo/Simple-jQuery-Html5-Based-360-Degree-Countdown-Timer-countdown360/src/jquery.countdown360.js" type="text/javascript" charset="utf-8"></script> 
 
<button id="activate">Test</button> <div id="countdown"></div>

Answer 2

这里工作的脚本。用这个替换你的功能。试试吧，让我知道它是否适合你：

$(function(){ 
     var $btn = $('#activate'); 
     $btn.click(function(){ 
      var $this = $(this); 
       $this.attr('disabled', 'disabled').html("Activated");   
      $("#countdown").countdown360({ 
       radius  : 40, 
       seconds  : 10, 
       fontColor : '#FFFFFF', 
       autostart : false, 
       onComplete : function() { $('#countdown').fadeOut(); } 
      }).start(function(){ 
       setTimeout(function() { 
       $this.removeAttr('disabled').html('Activate'); 
      }, 10000); 
      }); 

     }); 
    }); 

Answer 3

使用的onComplete属性

的onComplete：disapier（）

功能dissapiar（）{

$ btn.fadeOut（）; }