jQuery input focus css animation-CodePudding

As soon as I click inside the input, I want my border colors to come in animated form and fade out with the same animation after exiting the input, but I'm stuck somewhere.

Following my code:

HTML

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

CSS

#search-input{
  width:150px;
  height:20px;
  background-color: #f3f3f3;
  font-size:16px;
}
#search-input:focus{
  outline:none
}

jQuery

jQuery('#search-input').on('focus',function(){
  jQuery(this).css('border', '2px solid #f27a1a','transition', '0.2s');
}).on('focusout',function(){
  jQuery(this).css('border','2px solid transparent','transition', '0.2s');
});

https://jsfiddle.net/justfeel/t7kb8hea/4/

CodePudding user response：

Your issue is that there is no .css overload that takes multiple arguments as "pairs"

$(this).css('border', '2px solid #f27a1a','transition', '0.2s');

In the general case, you can split this into two calls

$(this)
    .css('border', '2px solid #f27a1a')
    .css('transition', '0.2s');

or use one of the overloads that allows multiple arguments

  $(this)
    .css({
       'border': '2px solid transparent',
       'transition': '0.2s'
    });

In the specific case for this question: add the transition in the css so there's no need to add it (as the same value) on focus in/out.

#search-input{
  width:150px;
  height:20px;
  background-color: #f3f3f3;
  font-size:16px;
  transition:0.2s;
}

CodePudding user response：

check this url with same requirement. you can customize with your own requirement