动画边框颜色会产生不一致的结果

Question

我正在尝试在特定事件上为元素的边框颜色设置动画。调用以下函数，但“闪烁”边框效果似乎不会发生或几乎不可察觉：

jQ('body').find('a.chosen-single').stop().animate({borderColor: "#3737A2"}, 1)
    .animate({borderColor: "#FFFFFF"}, 250)
    .animate({borderColor: "#3737A2"}, 1)
    .animate({borderColor: "#FFFFFF"}, 250);

HTML：

<a class="chosen-single chosen-default" tabindex="-1">
    <span>Select An Option</span>
</a>

CSS：

.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 0 0 8px;
  height: 23px;
  border: 1px solid #fff;
  border-radius: 2px;
  background-color: #fff;
  box-shadow:none;
  color: #999;
  text-decoration: none;
  white-space: nowrap;
  line-height: 24px;
  -webkit-transition: all 0.18s ease-out;
     -moz-transition: all 0.18s ease-out;
       -o-transition: all 0.18s ease-out;
          transition: all 0.18s ease-out;
  padding-left:24px;
}

元素应突然改变边框颜色，褪色为白色，两次。

如果我将“1”值提高，它开始变得更加明显，但这并不是我所追求的视觉效果。什么是更好/更可靠的方式？

编辑：我也在使用jQuery UI，如果这样可以更容易回答。