jqueryjquery-uieffectsjquery-ui-button

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


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

  • 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" />