我正在尝试在特定事件上为元素的边框颜色设置动画。调用以下函数,但“闪烁”边框效果似乎不会发生或几乎不可察觉:
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,如果这样可以更容易回答。