我有一个输入框，我想将其向上/向下滑动，使其看起来像是来自上方元素的后面。
我的输入 HTML 如下所示:
<input type="text" placeholder="Add New Todo">
输入的 CSS 如下所示:
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
我的 JS 看起来像这样:
$("#dropdown").click(function(){
$("input[type='text']").slideToggle(2000);
})
目前，幻灯片卡在开始/结束处，因为高度似乎无法降低到 0。
Here是所发生情况的完整示例。
如何让我的输入框流畅地动画？
最佳答案
我将输入包装在一个包含 overflow hidden 的元素中，并为该元素设置动画。
$("#dropdown").click(function(){
$(".input_container").toggleClass('hide');
})#container {
background-color: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
margin: 100px auto;
width: 360px;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #2BC0E4;
background: -webkit-linear-gradient(to left, #EAECC6, #2BC0E4);
background: linear-gradient(to left, #EAECC6, #2BC0E4);
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 0px;
box-sizing: border-box;
color: #2980b9;
border: 3px solid rgba(0,0,0,0);
}
input:focus {
background-color: #fff;
border: 3px solid #2980b9;
outline: none;
}
::placeholder {
color: #9e9e9e;
opacity: 1;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
#dropdown {
float: right;
}
.input_container{
height:30px;
transition: height 2s;
overflow:hidden;
}
.input_container.hide{
height:0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ToDo List</title>
</head>
<body>
<div id="container">
<h1>TO-DO LIST <button id = "dropdown">X</button> </h1>
<div class='input_container'>
<input type="text" placeholder="Add New Todo">
</div>
</div>
</body>
</html>关于javascript - jQuery slideToggle 函数对我的输入框没有预期的效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50723820/