jquery - 使输入框的边框在加载时脉动

Question

任何人都知道如何使用 jquery 在页面加载时让此输入框的边框颜色淡入黄色，然后淡出，然后淡入，然后再次淡出(脉动两次)？脉动后，边框颜色应设置为透明。我尝试了各种设置超时，但似乎没有任何效果。请帮忙，谢谢!!

<input type="search" id="searches" autofocus="autofocus" placeholder="Search" onclick="select();">

Answer 1

这可以用 CSS3 来完成:

#searches {
  border: 2px solid transparent;
  -webkit-animation: pulse 0.7s;
  -webkit-animation-iteration-count: 2;
  animation: pulse 0.7s;
  animation-iteration-count: 2;
  background: white;
  outline: 0;
}

@-webkit-keyframes pulse {
  from { border-color: transparent; }
  50% { border-color: yellow; }
  to { border-color: transparent; }
}
@keyframes pulse {
  from { border-color: transparent; }
  50% { border-color: yellow; }
  to { border-color: transparent; }
}

jsFiddle 示例:http://jsfiddle.net/spXH8/1/

如果您真的需要用 jQuery 完成它(为了 IE 支持或其他)，请参阅 accepted answer的 'Pulsing' a border in Javascript/JQuery .