Question

伙计们，我写了一个代码，每当我点击一个按钮（加号）时，我的输入应该会滑动但是当你看到我的运行代码时，每当我点击该按钮时它首先开始滑动输入，直到它到达占位符然后它开始将占位符滑动为一个单独的元素，它们不会滑动在一起，所以我想知道有没有办法解决这个问题？只有输入幻灯片和占位符随之滑动。

HTML：

<div id="container">
<h1>LIST<i class="fa fa-plus" aria-hidden="true"></i></h1>
<input type="text" placeholder="Add New Todo"></div>

的jQuery

    var plusSign = $("h1 i")
plusSign.on("click",function(event){
    $('input:text').slideToggle(3000);
})

Answer 1

最简单的方法是将输入修改为：

border: 0;        /* change */
display: block;   /* add this */

并且为了防止jQuery中的动画构建 - 请使用.stop()，如：

$('input:text').stop().slideToggle(3000);

另外要切换你可以做的图标：

plusSign.toggleClass("fa-plus fa-minus"); // if needed

正确的方法是在输入周围创建一个包装器并为该元素设置动画;但是如果您对结果感到满意并且在浏览器中进行了测试 - 您可以保持这样。

要解释您遇到的问题：

.slideToggle()几乎可以做到：

但是如果您的元素有边框 - 那些元素没有动画，并且一旦元素设置为display: none;就会立即消失，从而创建不需要的跳转。
另一个问题是动画inline元素 - 行高可能会干扰 - 因此设置为inline-block或block会有很大帮助。