停止jquery淡入淡出效果？

Question

I am trying to make a blinking light recording effect. Here is the code I have so far:

 $("#stop").hide(); function blink() { $("#red").fadeOut(500); $("#red").fadeIn(500); } $("#start").click(function () { $("#start").hide(); $("#stop").show(); window.test = setInterval(blink, 500); }); $("#stop").click(function () { window.clearInterval(test); $("#stop").hide(); $("#start").show(); });

 <button class="success" id="start">Start</button> <button id="stop">Stop</button>

Here is the blinking light image:

 <img src="record.png" id="red" />

The image is solid and the jquery fades it in and out. But when you click the stop button it does not stop; it keeps blinking; I also tried to use jquery: .stop(); . But it did not work. How can I fix this? Thanks for all your help in advance!

Answer 1

Try:

function blink() {
  $("#red").fadeOut(500);
  $("#red").fadeIn(500);
}

$("#start").click(function () {
  $("#start").hide();
  $("#stop").show();

  window.test = setInterval(blink, 500);
});

$("#stop").click(function () {
  window.clearInterval(test);
  $("#stop").stop();
  $("#start").show();
});

It should stop the light after the current interval.