javascript - jQuery slideToggle 函数对我的输入框没有预期的效果
问题描述
我有一个输入框,我想向上/向下滑动,使其看起来像是来自上方元素的后面。
我的输入 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。
这是一个完整的例子。
如何使我的输入框动画流畅?
解决方案
我会将输入包装在一个包含隐藏溢出的包含元素中并为其设置动画。
$("#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>
推荐阅读
- google-api - Google API:列出登录用户所属的组
- git - index.lock 无效参数
- c# - 如何访问 JArray 中的值?
- php - 代客 502 坏网关 nginx/1.19.1
- android - 使用 android/flutter 写入 NFC 标签
- php - 在发票或交货单上显示每个产品的条形码,woocommerce
- c++ - 不同容器上的 std::stack 实现有什么实际区别?
- python - 如何用另一个框架替换框架
- javascript - 为什么我收到内部服务器错误 500
- javascript - React Native Drawer 不会自动关闭