Segera setelah saya mengklik di dalam input, saya ingin warna perbatasan saya muncul dalam bentuk animasi dan memudar dengan animasi yang sama setelah keluar dari input, tetapi saya terjebak di suatu tempat.

Mengikuti kode saya:

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/

0
Ferhat 1 Oktober 2021, 13:20

2 jawaban

Jawaban Terbaik

Masalah Anda adalah tidak ada kelebihan .css yang menggunakan banyak argumen sebagai "pasangan"

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

Dalam kasus umum, Anda dapat membagi ini menjadi dua panggilan

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

Atau gunakan salah satu kelebihan yang memungkinkan banyak argumen

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

Dalam kasus khusus untuk pertanyaan ini: tambahkan transisi di css sehingga tidak perlu menambahkannya (sebagai nilai yang sama) pada fokus masuk/keluar.

#search-input{
  width:150px;
  height:20px;
  background-color: #f3f3f3;
  font-size:16px;
  transition:0.2s;
}
2
freedomn-m 1 Oktober 2021, 10:38