javascript - 停止jquery褪色效果？

Question

我正在尝试制作闪烁的灯光录制效果。这是我到目前为止的代码：

$("#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>

这是闪烁的灯光图像：

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

图像是实心的，jquery 将其淡入淡出。但是当您单击停止按钮时，它不会停止；它一直在闪烁；我也尝试使用 jquery: .stop();。但它没有用。我怎样才能解决这个问题？提前感谢您的所有帮助！

标签： javascripthtmljquery

Answer 1

尝试：

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();
});

它应该在当前间隔后停止亮灯。