How to make button blinking infinite, but with possibility to stop at anytime

Question

I need to make button to start blinking after some other elemment trigered it, for example checking the checkbox - see the code below:

<label>I agree with the terms</label>
<input class="some_check" type="checkbox" id="Signed">
<button class="buttonstyle" name="buttonNext" onClick="nextChoose('NEXT')" disabled>Proceed!</button>

Blinking must be infinite until:

1. user clicks the button or
2. unchecks the checkbox.

I know there's .effect() method in jQuery UI, but it's time-limited and if I loop it through the callback, how than I can break it to return button in a previous state?

Solution 1

Maybe your looking for something like this THIS FIDDLE

CSS:

#click, #btn {margin: 20px;}

JavaScript:

var timer;

$("#blink").on('change', function() {
    if ($("#blink").is(':checked')) {
        blinking($("#btn"));
    } else {
        clearInterval(timer);
    }
});

$("#btn").click(function() {
    clearInterval(timer);
    $("#blink").attr('checked', false);
});



function blinking(elm) {
    timer = setInterval(blink, 10);
    function blink() {
        elm.fadeOut(400, function() {
           elm.fadeIn(400);
        });
    }
}

HTML:

<input type="checkbox" id="blink"/>
<input type="button" value="CLICK ME" id="btn" />

Solution 2

You can use setInterval to make something happen over and over again, and later call clearInterval on its return value to make it stop. Here's a working example to get you started.

Comments

[shershen]

maybe i was no correct in my explanation, but the button must start blinking AFTER i check checkbox - it's even not the main point, but it's important, than AFTER UNCHECK the button must return to previous state

[user1181942]

@shershen I know it might be too late to ask this, but I am stuck here.. I am using this solution and after some time I get error of "Out of stack memory".. Did you face this issue?.. If yes what solution you used?