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

Posted 2023-03-06

【中文标题】jquery/css 闪烁按需启动和停止

【英文标题】：jquery/css blinking start and stop on demand

【发布时间】：2016-02-22 12:18:51

【问题描述】：

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

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

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

【问题讨论】：

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

【参考方案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");