javascript - 如何滑动下（）输入框？

Question

我有一个按钮，可以在前一个输入框的正下方添加一个输入框。我想添加一个动画，试图让它更流畅，而不是仅仅弹出那里。到目前为止我已经尝试过了，但它不起作用。一个小提琴的例子会很棒。

var counter = 0;
$('#addinput').click(function(){
    $('#inputs').append('<input class="search" style="margin-bottom:4px;" type="search" name="word' + counter++ + '"/>');
    $('.search').slideDown();
});

Answer 1

你可以这样做：

HTML：

<div>
<input type="text" />
<button id="addinput">Add Input</button>
</div>
<br />
<div id="inputs"></div>

jQuery：

var counter = 0;
$('#addinput').click(function(){
    $('<input style="display:none" class="search" type="search" name="word' + counter++ + '"/><br /><br />').appendTo('#inputs').fadeIn('slow');
});

请注意，slideDown在您的情况下效果将不起作用，因为浏览器显示的内容会在添加 div 后立即更新。因此，基本上，您需要先隐藏该 div（您可以使用display: none或hide()），然后再实际附加它。

演示