如何使按钮无限闪烁，但可以随时停止

Question

我需要使按钮在其他元素触发后开始闪烁，例如选中复选框 - 请参阅下面的代码：

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

闪烁必须是无限的，直到：

1. 用户单击按钮或
2. 取消选中复选框。

我知道 jQuery UI 中有 .effect() 方法，但它是有时间限制的 如果我通过回调循环它，我如何才能将其中断以返回先前状态的按钮？

Answer 1

也许您正在寻找类似的东西 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" />

Answer 2

您可以使用 setInterval 使某些事情一遍又一遍地发生，然后在其返回值上调用 clearInterval 使其停止。 这是一个可以帮助您入门的示例。