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>

Answer 2

以下是所有可设置动画的css属性的列表：https://www.w3schools.com/Jquery/eff_animate.asp

如图所示，边框样式和颜色无法使用jQuery设置动画。

因此，您必须在不设置动画的情况下应用css更改。

加-css属性应该是border-style，而不是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>

expample显示结果完全相同；似乎"；就像它正在被动画化，而只有宽度。