title: jQuery clickable blinking text div
body: <p>Despite all the posts on SO re blinking text, I didn't find a perfect solution. Most blink the text by hiding it - which means the user cannot reliably click on it (during the hidden cycle, it is not clickable).</p>
  
  <p>I've scraped bits and pieces from other examples to create the beginnings of a solution, but I'm having difficulty with the parameters.</p>
  
  <p>DESIRED:</p>
  
  <pre><code>$('#selector').click(function() {
      blink(this, speed, iterations); //iterations==0 for unlimited iterations
  });
  </code></pre>
  
  <p>PROBLEM:</p>
  
  <ul>
  <li>Blinking does not stop after desired number of iterations (or <code>0</code> for blink forever).</li>
  </ul>
  
  <p>Note that I do not wish to use <code>.hide</code>, <code>.toggle</code>, <code>.fade</code> or any other jQ method that renders the div unclickable during the "invisible" period of the blinking cycle.</p>
  
  <p>Here's the code I have so far: <a href="http://jsfiddle.net/CaVEx/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
  
                  var pad = 0;
  
                  $('#clignotant').click(function() {
                      if (pad==0) {
                          pad++;
                          blink(this, 800, 15);
                      }else{
                          alert('Not document.load, so now send user to the streaming video');
                      }
                  });
  
                  function blink(selector, blink_speed, iterations){
                      counter = 0;
                      $(selector).animate({opacity:0}, 50, "linear", function(){
                          $(this).delay(blink_speed);
                          $(this).animate({opacity:1}, 50, function(){
                              if (iterations == 0) {
                                  blink(this, blink_speed, iterations);
                              }else if (counter&gt;iterations) {
                                  return false;
                              }else{
                                  counter++;
                                  blink(this, blink_speed, iterations);
                              }
                          });
                          $(this).delay(blink_speed);
                      });
                  }
  
                  //This line must come *AFTER* the $('#clignotant').click() function !!
                  window.load($('#clignotant').trigger('click'));
  
  
              }); //END $(document).ready()
  
          &lt;/script&gt;
      &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="clignotant" style="background-color:#FF6666;width:500px;
      height:100px;line-height:100px;text-align:center;"&gt;
          This box, and the text in it, are blinking
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Sources:<br />
  Moses Christian's answer <a href="https://stackoverflow.com/questions/1605698/text-blinking-jquery">in this SO post</a><br />
  emgee's <a href="http://jsfiddle.net/emgee/4QJeG/7/" rel="nofollow noreferrer">jsFiddle</a></p>