title: border highlighting loop with jquery
body: <p>I'm having trouble coming up with a loop that changes the border color of an image from black to yellow and yellow to black over x seconds. Then applying an interrupt to the loop when the image gets clicked on. I don't know where to start, can someone point me in the right direction? I think I may be using the wrong tools to properly write this.</p>
  
  <p>Here's what I've come up so far, though if there's a better way to write this, do share!</p>
  
  <pre><code>for( i = 100; i &gt;= 0; i--)
  {
  $("#imgid").css("border-color", 'rgb(' + i + '%,' + i + '%,0)');
  }
  </code></pre>
  
  <p>There's three parts I'd like to know.</p>
  
  <p>1.)I'm having trouble picturing how I could combine two loops so that I can also count upwards as well so that it will turn into yellow and back to black <em>without stopping</em>. Or can I accomplish this with one loop?</p>
  
  <p>2.)Slow the loop to be able to control the amount of seconds for the border fading effect.</p>
  
  <p>2.)How to break the loop with an onclick() event.</p>