淡出选项

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

这是工作脚本。只需用这个替换你的功能。尝试一下，让我知道它是否适合你：

$(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 2

使用回调onComplete淡出计数器：

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

请参阅下面的代码段（更改为3秒，因为......我讨厌等待）。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用onComplete属性

onComplete：消失（）

函数消失（）{

$ btn.fadeOut（）; }