Javascript 如何向下滑动（）输入框？

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

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

var计数器=0；
$（'#addinput'）。单击（函数（）{
$（'#inputs'）。追加（''）；
$（'.search'）.slideDown（）；
});

您可以这样做：

HTML:

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

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

添加输入

jQuery:

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

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

var计数器=0；
$（'#addinput'）。单击（函数（）{
$（“

”）.appendTo（“#inputs”）.fadeIn（'slow'）；
});

请注意，在您的案例中，

slideDown

效果将不起作用，因为添加div后，浏览器显示的内容将立即更新。因此，基本上，您需要先隐藏该div（您可以在实际附加它之前使用

display:none

或

hide（）

）

您可以这样做：

HTML:

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

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

添加输入

jQuery:

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

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

var计数器=0；
$（'#addinput'）。单击（函数（）{
$（“

”）.appendTo（“#inputs”）.fadeIn（'slow'）；
});

请注意，在您的案例中，

slideDown

效果将不起作用，因为添加div后，浏览器显示的内容将立即更新。因此，基本上，您需要先隐藏该div（您可以在实际附加它之前使用

display:none

或

hide（）

）

slideDown（）要求首先隐藏元素slideDown（）要求首先隐藏元素