Question

What I want to do is when a user clicks something:

<div id="FormContainer">
    <form>
     ...
    </form>
</div>

<a href="#" onClick="FlashElement()">Make it flash</a>

It briefly flashes a rectangle around the form within the FormContainer. Is there any way I can achieve this?

Answer 1

A quick and simple way would be to draw a colored border then remove it after a short period:

function FlashElement() {
  var $el=$('#FormContainer'), oldBorder=$el.css('border');
  $el.css({border:'4px solid yellow'});
  setTimeout(function() { $el.css({border:oldBorder}); }, 500);
}

If you want a repeated flashing effect then you could make several calls to “setTimeout” to hide/show the border at the desired interval, e.g.:

  // ...
  var newBorder = '4px solid yellow';
  $el.css({border:newBorder});
  setTimeout(function() { $el.css({border:oldBorder}); }, 100);
  setTimeout(function() { $el.css({border:newBorder}); }, 200);
  setTimeout(function() { $el.css({border:oldBorder}); }, 300);
  setTimeout(function() { $el.css({border:newBorder}); }, 400);
  setTimeout(function() { $el.css({border:oldBorder}); }, 500);