javascript - 如何 slideDown() 输入框？

Question

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

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())，然后再实际附加它。

Demo