Как сделать мигание кнопки бесконечным, но с возможностью остановки в любое время
Мне нужно сделать кнопку, чтобы начать мигать после того, как ее сработал какой-то другой элемент, например, установив флажок - см. Код ниже:
<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>
Мигание должно быть бесконечным до:
- пользователь нажимает кнопку или
- снимает флажок.
Я знаю, что есть .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
на его возвращаемое значение, чтобы остановить его. Вот рабочий пример, чтобы вы начали.