如何在jquery中闪烁一个div？ [复制]答案

【问题标题】：How to blink a div in jquery? [duplicate]如何在jquery中闪烁一个div？ [复制]
【发布时间】：2021-07-01 18:46:31
【问题描述】：

可能重复：
Blink an div with jquery

我需要知道如何在 jquery 中使 div 闪烁？

【问题讨论】：

那么，到目前为止，您尝试了什么？

【解决方案1】：

html

<div class="blink">blinking text</div>

jquery

function blink(selector){
$(selector).fadeOut('slow', function(){
    $(this).fadeIn('slow', function(){
        blink(this);
    });
});
}
    
blink('.blink');

演示：

function blink(selector) {
  $(selector).fadeOut('slow', function() {
    $(this).fadeIn('slow', function() {
      blink(this);
    });
  });
}

blink('.blink');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blink">blinking text</div>
non-blinking
<div class="blink">more blinking text</div>

更新（更新答案）

您不再需要使用 jQuery 来实现此类效果。您可以只使用 CSS（使用CSS animations）。
（兼容性表http://caniuse.com/#feat=css-animation）

CSS（使用标准属性）

.blink{
    animation:blink 700ms infinite alternate;
}

@keyframes blink {
    from { opacity:1; }
    to { opacity:0; }
};

演示（带有供应商前缀属性）：

.blink {
  -webkit-animation: blink 700ms infinite alternate;
  -moz-animation: blink 700ms infinite alternate;
  -o-animation: blink 700ms infinite alternate;
  animation: blink 700ms infinite alternate;
}

@-webkit-keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-o-keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-moz-keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

;

<div class="blink">blinking text</div>
non-blinking
<div class="blink">more blinking text</div>

【讨论】：

如果你只想闪烁 Div 背景色而不是文本，你会怎么做？
使用 css 而不是为不透明度设置动画，使用 rgba 为 Alpha 通道设置动画。 from { background-color:rgba(0,0,0,1); } to { background-color:rgba(0,0,0,0); }（黑色）

【解决方案2】：

假设你的 div 有 id="blinkMe"

setInterval(function () {
   var vis = $("#blinkMe").css("visibility");
   vis = (!vis || vis == "visible") ? "hidden" : "visible";
   $("#blinkMe").css("visibility", vis);
}, 500);

注意：使用“可见性”而不是“显示”/.toggle()，因为后者会导致布局在 div 闪烁时移动。

【讨论】：