html - jQuery 动画边框颜色

Question

我有以下代码来为搜索框设置动画。动画只对宽度有影响，对边框没有影响。
什么原因？

$('.toggle_search').on('click', function(e) {
    e.preventDefault;
    $('#keyword').animate({
        width: '200px',
        borderBottomWidth: "2px",
        borderColor: "#000",
        borderType: 'solid'
    })
});

input {
    border:none; 
    width:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="get" id="searchform" action="" role="search">
    <input type="text" name="keyword" id="keyword" onkeyup="fetch()">
    <span class="toggle_search">open</i></span>
</form>

Answer 1

你需要这样的东西吗？

$('.toggle_search').on('click', function(e) {
    e.preventDefault;
    
    if($(this).hasClass('focus')) {
        
      $('#keyword')
      .css('width', 0)
      .css('border-bottom', 0); 
      $('.toggle_search').text('open');
      $(this).removeClass('focus');
      
    } else {
          
      $(this).addClass('focus');
      $('#keyword')
      .css('width', 200)
      .css('border-bottom', '2px solid #ddd'); 
      $('.toggle_search').text('close');
      
    }
    
});

input{border:none; border-color:#fff; width:0; transition: 0.5s}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<form method="get" id="searchform" action="" role="search">
    <input type="text" name="keyword" id="keyword" onkeyup="fetch()">
    <span class="toggle_search">open</i></span>
</form>

编辑:
您必须将左边框、上边框和右边框宽度设置为 0

$('.toggle_search').on('click', function(e) {
    e.preventDefault;
    
    if($(this).hasClass('focus')) {
        
      $(this).removeClass('focus'); 
      $('#keyword').animate({
          "width": '0px',
          borderBottomWidth: "0px"
      })
      $('.toggle_search').text('open');
      
    } else {
          
      $(this).addClass('focus');
     $('#keyword').animate({
          "width": '200px',
          borderBottomWidth: "2px",
          borderBottomColor: "#ddd"
      })
      $('.toggle_search').text('close');
      
    }
    
});

input { border-top:0px; border-left:0px; border-right: 0px; width: 0px; border-color: green; } 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<form method="get" id="searchform" action="" role="search">
    <input type="text" name="keyword" id="keyword" onkeyup="fetch()">
    <span class="toggle_search">open</i></span>
</form>