Функция 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.

Здесь - это полный пример того, что происходит.

Как сделать так, чтобы поле ввода плавно анимировалось?

javascript jquery html css

06.06.2018 17:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я бы обернул ввод в содержащий элемент со скрытым переполнением и анимировал его.

$("#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>

Отлично работает, спасибо! В итоге я просто обернул свой ввод в div и использовал jQuery для его анимации так же, как и раньше, вместо того, чтобы делать CSS-анимацию.

— 06.06.2018 17:40

06.06.2018 17:19

Вы можете добавить условие http://jsfiddle.net/pr2szjhu/1/

<input type = "text" placeholder = "Add New Todo" id = "test">

 $("#dropdown").click(function(){
  if ($('#test').is(':visible')){
     $("#test").removeAttr('placeholder');
     $("input[type='text']").slideToggle(1800);
  }else{
     $("input[type='text']").slideToggle(1800,function() {
         $("#test").attr('placeholder','Add New Todo');
    });

  }
})

Спасибо, но это не совсем тот эффект, которого я хотел. В конце еще есть прыжок.

— 06.06.2018 17:37

06.06.2018 17:20