jQuery实现input输入框聚焦失焦时边框CSS动画过渡效果问题求助

你当前代码无法实现边框平滑过渡效果，核心有三个问题：

• 未给input设置初始边框属性，浏览器自带的默认边框没有可过渡的初始状态，无法实现渐变效果
• transition属性需要提前定义在元素的基础样式中，你在触发focus事件时才动态添加过渡属性，不会生效
• jQuery的css()方法多属性传参语法错误，多个样式属性需要传入键值对对象，不能直接用逗号分隔参数

这个需求直接用CSS原生的:focus伪类就能实现，性能比JS实现更好：

HTML代码 #

<input type="text" id="search-input" placeholder="Search..">

CSS代码 #

#search-input{
  width:150px;
  height:20px;
  background-color: #f3f3f3;
  font-size:16px;
  /* 定义初始边框和过渡属性 */
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}
#search-input:focus{
  outline:none;
  /* 聚焦时仅修改边框颜色，自动触发过渡动画 */
  border-color: #f27a1a;
}

如果确实需要通过JS控制，修改后代码如下：

CSS代码 #

#search-input{
  width:150px;
  height:20px;
  background-color: #f3f3f3;
  font-size:16px;
  /* 提前定义初始边框和过渡属性 */
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}
#search-input:focus{
  outline:none
}

jQuery代码 #

jQuery('#search-input').on('focus',function(){
  jQuery(this).css('border-color', '#f27a1a');
}).on('focusout',function(){
  jQuery(this).css('border-color', 'transparent');
});

内容的提问来源于stack exchange，提问作者Ferhat