Question

我的应用程序在很大程度上依赖于signalr来获取实时信息。要求是当检测到来自信号器的event1时闪烁div然后在事件2停止闪烁时。

我已经使用fadein / fadeout实现了，但是即使在我删除了课程之后，仍然会出现非常高的内存使用率以及fadein / fadeout等问题。

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

Answer 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?

中选择了代码

Answer 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");

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

2 个答案: