Как сделать мигание кнопки бесконечным, но с возможностью остановки в любое время

Мне нужно сделать кнопку, чтобы начать мигать после того, как ее сработал какой-то другой элемент, например, установив флажок - см. Код ниже:

<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. снимает флажок.

Я знаю, что есть .effect() метод в пользовательском интерфейсе jQuery, но он ограничен по времени, и если я зациклю его на обратном вызове, как я могу сломать его, чтобы вернуть кнопку в предыдущее состояние?

2 ответа

Решение

Может быть, вы ищете что-то вроде этого

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

Ты можешь использовать setInterval чтобы что-то случилось снова и снова, а потом позвонить clearInterval на его возвращаемое значение, чтобы остановить его. Вот рабочий пример, чтобы вы начали.

Другие вопросы по тегам