如何使用它的占位符滑動切換輸入

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);
})

https://jsfiddle.net/Ghost007D/aduLw0u3/1/

Answer 1

最簡單的方法是將輸入修改為：

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

並防止jQuery中的動畫.stop() - 使用.stop()如：

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

另外要切換你可以做的圖標：

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

jsFiddle DEMO

正確的方法是在輸入周圍創建一個包裝器，然后為該元素設置動畫; 但如果您對結果感到滿意並且在瀏覽器中進行了測試 - 您可以保持這樣。

---

解釋你遇到的問題：

.slideToggle()做得非常好：

• 動畫高度：
• 如果元素沒有高度設置則display: none ;

但是如果你的元素有邊框 - 那些沒有動畫，並且一旦元素設置為display: none;就會消失display: none; 創造不受歡迎的跳躍 。
另一個問題是動畫inline元素 - 行高可能會干擾 - 因此設置為inline-block或block有助於 - 很多。