使用 .slideToggle() 时的 jQuery 跳跃效果

Question

我正在关注 Udemy Bootcamp，其中包括使用 jQuery 编写待办事项列表。 该程序要求文本输入在按下“最小化”按钮时消失，使其淡出，但是一旦输入消失，所有较低的元素都会“跳起来”。我想我可以通过用幻灯片效果替换它来改进它。

问题是输入向上滑动并且大部分消失，然后突然“跳”起来。我已经查看了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>

这只是一个sn-p。我在Fiddle 上上传了整个代码，希望有任何帮助

谢谢！

Answer 1

不要直接切换input，而是用div 包装输入。然后切换div

要进行的更改：

<div id='input'>
   <input type="text" placeholder="Add new Todo">
</div>

$(".fa-plus").click(function() {
    $("#input").slideToggle();
});