javascript - 我怎样才能简单地在表单周围闪烁一个矩形？

Question

我想做的是当用户点击某些东西时:

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

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

它在 FormContainer 中围绕表单短暂闪烁一个矩形。有什么办法可以实现这一目标吗？

Answer 1

一种快速简单的方法是绘制彩色边框，然后在短时间内将其移除:

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

如果你想要重复的闪烁效果，那么你可以多次调用“setTimeout”以在所需的时间间隔隐藏/显示边框，例如:

  // ...
  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);