2015-05-21 140 views
0

這是應該發生的事情。加載CSS,Javascript或jQuery閃爍元素

  1. 頁面加載
  2. 它什麼都不做1秒鐘
  3. 然後使該元素 「閃爍」 的四倍(約600毫秒的延遲)
  4. 完成!

語言使用

使用CSS,JavaScript或jQuery來解決這個問題。它應該適用於常見的瀏覽器和設備。

眨眼

有閃爍我的意思是從一個背景顏色到另一個褪色。褪色時間應該是可變的。

小提琴

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; 
} 

它是如何做到最好的方法?

回答

3

你可以嘗試這樣的事情。 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); 
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); 
    }); 

在閃光燈它要切換通斷.. 反正我剛纔讀通過閃爍你的意思是在切換顏色,只是改變了,如果else語句標籤的ID匹配顏色比例和想要切換的顏色。