CODEWITHSUNDEEP
javascriptjquery
Hrca
Hrca

Reputation: 19

Fading out option

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

    });
});

I've put timer that can be activated by clicking on a button. So I want from timer to fade out when the action is complete (after 10 seconds)....thanks for adding the solution. Next question is: how to define cancel button when I click on it I want to:

Upvotes: 0

Views: 126

Answers (2)

Mackan
Mackan

Reputation: 6271

Use the callback onComplete to fade out the counter:

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

See below snippet for example (changed to 3 seconds because ... I hate waiting).

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

Upvotes: 0

Redrif
Redrif

Reputation: 650

here is working script. Just replace your function with this. Try it and let me know if it works for you:

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

        });
    });

Upvotes: 1

Related Questions