我正在跟踪Udemy训练营,其中包括使用jQuery编写Todo列表。该程序要求按下“最小化”按钮使其淡入淡出时,文本输入必须消失,但是一旦输入消失,所有下部元素都将“跳起来”。我想我可以通过用幻灯片效果代替它来改善它。
问题在于,输入会向上滑动并基本消失,然后突然“跳”起来。我已经看过stackOverflow,它似乎与大小/边距或容器有关,但是通过摆弄它(甚至通过控制台进行设置和/或删除),我仍然无法实现这种效果走开,我想我需要些帮助。
// Check off todos while clicking. Use on(click) to add event listener
// to future elements not yet on page when the code first runs. We apply it to the whole ul for
// ("click", "li") means the event listener is applied to the li inside the ul
$("ul").on("click", "li", function() {
$(this).toggleClass("completed");
});
// Click on X to delete Todo
$("ul").on("click", "span", function(event) {
$(this).parent().fadeOut(500, function() {
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event) {
if (event.which === 13) {
// grab the text of the new todo from the input
var todoText = $(this).val();
$(this).val("");
// create new li to add to the ul
$("ul").append("<li>" + "<span><i class='fa fa-trash'></i></span> " + todoText + "</li>");
}
})
// Make the plus sign collapse the text input
$(".fa-plus").click(function() {
$("input").slideToggle(function() {
});
});
body {
background: #2980B9;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#container {
width: 360px;
margin: 5% auto;
background: #f7f7f7;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
.completed {
color: gray;
text-decoration: line-through;
}
.fa-plus {
float: right;
}
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
background: white;
height: 40px;
line-height: 2.5em;
}
li:nth-child(2n) {
background: #f7f7f7;
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 360px;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0, 0, 0, 0);
}
input:focus {
background: white;
border: 3px solid #2980b9;
outline: none;
}
span {
background: red;
height: 40px;
margin-right: 40px;
text-align: center;
color: white;
width: 0;
display: inline-block;
opacity: 0;
transition: 0.2s linear;
}
li:hover span {
width: 40px;
opacity: 1;
}
.hidden {
display: none;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<div id="container">
<h1>To-Do List<i class="fa fa-plus"></i></h1>
<input type="text" placeholder="Add new Todo">
<ul>
<li><span><i class="fa fa-trash"></i></span> First item</li>
<li><span><i class="fa fa-trash"></i></span> Second item</li>
<li><span><i class="fa fa-trash"></i></span> Third item</li>
</ul>
</div>
这只是一个片段。我将整个代码上传到了Fiddle,希望对您有所帮助
谢谢!
而不是直接切换input
,请用div
包装输入。然后切换div
进行更改:
<div id='input'>
<input type="text" placeholder="Add new Todo">
</div>
$(".fa-plus").click(function() {
$("#input").slideToggle();
});