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.

Here's what I've come up so far, though if there's a better way to write this, do share!

for( i = 100; i >= 0; i--)
{
$("#imgid").css("border-color", 'rgb(' + i + '%,' + i + '%,0)');
}

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. I also don't know how to go about controlling the amount of time it takes for that loop to execute and creating an interrupt when #imigid is clicked. Which is where I'm not sure how to write.