jQuery эффект скачка при использовании .slideToggle () - PullRequest
Новая
       26

jQuery эффект скачка при использовании .slideToggle ()

0 голосов
/ 03 апреля 2020

Я следил за Udemy Bootcamp, который включал кодирование списка Todo с использованием jQuery. Программа требовала, чтобы ввод текста исчезал при нажатии кнопки «сворачивать», заставляя ее исчезать, но тогда все нижние элементы просто «подпрыгивали» после исчезновения ввода. Я думал, что улучшу это, заменив его слайд-эффектом.

Проблема в том, что вход скользит вверх и в основном исчезает, а затем внезапно «подпрыгивает» вверх. Я уже посмотрел на stackOverflow, и это, кажется, что-то, связанное с размером / полем или контейнером, но возясь с ним (и даже устанавливая его и / или удаляя его через консоль), я все еще не смог сделать этот эффект go прочь, и я думаю, что мне нужна помощь. 

// 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 и был бы признателен за любую помощь

Спасибо!

1 Ответ

0 голосов
/ 03 апреля 2020

вместо прямого переключения input, оберните вход с div. и затем переключите div

изменения, чтобы сделать: 

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

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