jquery - 加载时 CSS、Javascript 或 jQuery 闪烁元素

Question

这是应该发生的事情。

1. 页面加载
2. 它在 1 秒内什么都不做
3. 然后它使元素“闪烁”四次(延迟约 600 毫秒)
4. 完成!

要使用的语言

使用 CSS、Javascript 或 jQuery 来解决它。它应该适用于常见的浏览器和设备。

眨眼

闪烁是指从一种背景颜色淡入另一种颜色。淡入淡出时间应该是可变的。

fiddle

https://jsfiddle.net/cjkkr5h0/

HTML

<div>Make me blink 4 times on load (600 ms)!</div>

<p>CSS, Javascript or jQuery. Make it simple, make it short. Should work on mobile devices and common browser versions.</p>

CSS

div {
    background: #90a5b7;

    /* NOT SO IMPORTANT */
    padding: 10px;
    color: #fff;
    display: inline-block;
    font-family: Arial;
}

.blink-to {
    background: #2a5b84;
}

如何做到最好？

Answer 1

你可以尝试这样的事情。 DEMO

var count = 0
// DOES NOTHING FOR 1 SEC
setTimeout(function () {
  var interval = setInterval(function () {

      $("#blinker").toggleClass(function(){
          count++
          return "blink"
      });

     // Reason it is 8 because it is counting the fadeIn and FadeOut  
     if (count == 8) 
         clearInterval(interval);

    }, 600)
}, 1000);