Элемент CSS, Javascript или jQuery при загрузке

Question

Это то, что должно произойти.

1. Page грузы
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); 

Answer 2

Вы можете сделать это на 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); 
    }); 

где поворотник его идентификатор тега вы хотите от переключения на .. в любом случае я только что прочитал, что мигающие вы имели в виду переключение цветов, просто изменить, если другое заявление соответствуют пропорции цвета и цвета, которые вы хотите переключить.