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

Question

这是应该发生的事情。

页面加载
1 秒内什么都不做
然后它使元素"blink"四次（延迟约600毫秒）
完成！

要使用的语言

使用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

你可以在 jquery 上做到这一点。这是一个可能的解决方案

 $(document).ready(function(){    
        var timesRun = 0;
        setInterval(function(){
            if(timesRun == 4){
                return;
            }
            timesRun++;

            if($("#blinker").css('display') == 'none' )
                $("#blinker").css('display','block');
            else
                $("#blinker").css('display','none') ;
        }, 600);
    });

其中信号灯是您要打开关闭的标签的 ID.. 不管怎样，我刚刚读到闪烁意味着切换颜色，只需更改 if else 语句以匹配颜色的比例和要切换的颜色。

Answer 2

你可以尝试这样的事情。 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);

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

CSS, Javascript or jQuery blinking element on load

css

jquery

fade

delay

pageload