title: I have a blinking box, how can I add a gradient to this or program it easier?
body: <p>I was trying to figure out how to get a blinking box, and as I did not really find a solution on the net, I was fiddling around a bit.</p>
  
  <p>I came up with the following, this works fine in general. My question is simply a) if there is an easier way to do this, and b) if I can program it in a way that it increases / decreases by gradient, instead of me having to program so many classes and stuff like that.</p>
  
  <p>See this code in action: <a href="http://jsfiddle.net/ZUJ5b/7/" rel="nofollow">http://jsfiddle.net/ZUJ5b/7/</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="test" class="test"&gt;Hello&lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function () {
      setInterval(blink, 75);
  });
  
  function blink() {
      if ($('#test').hasClass("test")) {
          $("#test").removeClass('test').addClass('test1');
      } else if($('#test').hasClass("test1")) {
          $("#test").removeClass('test1').addClass('test2');
      } else if($('#test').hasClass("test2")) {
          $("#test").removeClass('test2').addClass('test3');
      } else if($('#test').hasClass("test3")) {
          $("#test").removeClass('test3').addClass('test5');
      } else if($('#test').hasClass("test4")) {
          $("#test").removeClass('test4').addClass('test5');
      } else if($('#test').hasClass("test5")) {
          $("#test").removeClass('test5').addClass('test6');
      } else if($('#test').hasClass("test6")) {
          $("#test").removeClass('test6').addClass('test7');
      } else {
          $("#test").removeClass('test7').addClass('test');
      }
  }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.test {
      padding: 20px;
      width: 100px;
      border: 1px #ED0 outset;
      box-shadow: 0px 0px 6px 1px #FE4;
      -moz-box-shadow: 0px 0px 6px 1px #FE4;
      -webkit-box-shadow: 0px 0px 6px 1px #FE4;
  }
  .test1 {
      padding: 20px;
      width: 100px;
      border: 1px #EED000 outset;
      box-shadow: 0px 0px 6px 1px #FFE544;
      -moz-box-shadow: 0px 0px 6px 1px #FFE544;
      -webkit-box-shadow: 0px 0px 6px 1px #FFE544;
  }
  .test2 {
      padding: 20px;
      width: 100px;
      border: 1px #EEC300 outset;
      box-shadow: 0px 0px 7px 2px #FFDD44;
      -moz-box-shadow: 0px 0px 7px 2px #FFDD44;
      -webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
  }
  .test3 {
      padding: 20px;
      width: 100px;
      border: 1px #EEB600 outset;
      box-shadow: 0px 0px 7px 2px #FFD444;
      -moz-box-shadow: 0px 0px 7px 2px #FFD444;
      -webkit-box-shadow: 0px 0px 7px 2px #FFD444;
  }
  .test4 {
      padding: 20px;
      width: 100px;
      border: 1px #EA0 outset;
      box-shadow: 0px 0px 8px 3px #FFCC44;
      -moz-box-shadow: 0px 0px 8px 3px #FFCC44;
      -webkit-box-shadow: 0px 0px 8px 3px #FFCC44;
  }
  .test5 {
      padding: 20px;
      width: 100px;
      border: 1px #EEB600 outset;
      box-shadow: 0px 0px 7px 2px #FFD444;
      -moz-box-shadow: 0px 0px 7px 2px #FFD444;
      -webkit-box-shadow: 0px 0px 7px 2px #FFD444;
  }
  .test6 {
      padding: 20px;
      width: 100px;
      border: 1px #EEC300 outset;
      box-shadow: 0px 0px 7px 2px #FFDD44;
      -moz-box-shadow: 0px 0px 7px 2px #FFDD44;
      -webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
  }
  .test7 {
      padding: 20px;
      width: 100px;
      border: 1px #EED000 outset;
      box-shadow: 0px 0px 6px 1px #FFE544;
      -moz-box-shadow: 0px 0px 3px 1px #FFE544;
      -webkit-box-shadow: 0px 0px 3px 1px #FFE544;
  }
  </code></pre>