jQuery animate border color

user_2759097 0
Viewed 150

I have the following code to animate the search box. The animation has only effect on the width but not on border. What's the reason?

$('.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>

css html jquery
2 Answers

You need something like that?

$('.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>

EDIT: you have to set the border-left, border-top and border-right width to 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>

user_143541400

Here is a list of all the animatable css properties: https://www.w3schools.com/Jquery/eff_animate.asp

As seen, the border style and color cannot be animated using jQuery.

Therefor you must apply the css changes without animating them.

Plus - The css property should be border-style, not border-type.

$('.toggle_search').on('click', function(e) {
    e.preventDefault;
    $('#keyword').animate({
        width: '200px',
        borderBottomWidth: "2px"
    })
    .css({
        borderBottomColor: "#000",
        borderBottomStyle: '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>

The expample shows the result is all the same, as the border "seems" like it's being animated, while's only the width is.

user_97533520
Related