CODEWITHSUNDEEP
javascriptjquerycssanimation
La Pelota No Se Mancha
La Pelota No Se Mancha

Reputation: 75

How to slideDown() input box?

I have a button that adds an input box right under the previous input box. I want to add an animation, trying to make it more smooth instead of just popping there. I tried this so far but is does not work. A fiddle example would be awesome.

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

Upvotes: 1

Views: 414

Answers (1)

Eli
Eli

Reputation: 14827

You can do like this:

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

Notice that slideDown effect in your case won't work because the content of the browser displays is updated as soon as the div is appended. So basically, you need to hide that div first ( you can use either display: none or hide()) before actually append it.

Demo

Upvotes: 1

Related Questions