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

Demo

如何slideDown（）输入框？

1 个答案: