jquery/css 闪烁按需启动和停止答案

【问题标题】：jquery/css blinking start and stop on demandjquery/css 闪烁按需启动和停止
【发布时间】：2016-02-22 12:18:51
【问题描述】：

我的应用程序严重依赖信号器来获取实时信息。要求是当检测到来自 signalr 的 event1 时闪烁 div，然后在 event 2 上停止闪烁。

我已经实现了使用淡入/淡出，但遇到了诸如非常高的内存使用率和淡入/淡出之类的问题，即使在我删除了类之后也会继续发生。

function blinkcard() {
                $('.blink').fadeOut(500);
                $('.blink').fadeIn(500);
            }
            setInterval(blinkcard, 1000);

【问题讨论】：

如果你想删除字段的闪烁，你应该删除setInterval调用。

标签： jquery

【解决方案1】：

为什么不使用 CSS？

$('#t').click(function() {
  $("#blinkdiv").toggleClass('blink');

});

.blink {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0.0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=blinkdiv class='blink'>I am Blinking</div>
<p>
  <button id=t>Toggle Blink</button>

P.S：我从How to make blinking/flashing text with css3?中选择了代码

【讨论】：

【解决方案2】：

您可以使用 CSS 创建一个平滑的闪烁，例如：

.blink{
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

您可以通过添加或删除闪烁类来触发它：

$(".myElement").addClass("blink");
$(".myElement").removeClass("blink");

【讨论】：