Append and Slide together jQuery

Question

I have this append method which I made to add more input boxes until there is 10 of them which will disable into making more.

i = 0;
$('#add-link').click(function() 
{   
    if(i < 9)
    {
        $('.insert-links').append('<div class="new-link" name="link[]"><input type="text" /></div>');
        i++;
    }
    if(i == 9)
    {
        $('#add-link').html('');    
    }
});

Although, it's good. However, I want to implement a slideDown when appended, I've tried doing this:

$('.insert-links').append('<div class="new-link" name="link[]"><input type="text" /></div>').slideDown("fast");

Which doesn't work at all.

Answer 1

append() returns a reference to the original selector, not what was appended. I think you are looking for this:

$('.insert-links').append('<div style="display: none;" class="new-link" name="link[]"><input type="text" /></div>')
$('.insert-links').find(".new-link:last").slideDown("fast");

Live demo:

http://jsfiddle.net/V4SVt/2/

Answer 2

Like SimpleCoder's solution, but in only one line using appendTo():

$('<div style="display: none;" class="new-link" name="link[]"><input type="text" /></div>').appendTo($('.insert-links')).slideDown("fast");

Demo: http://jsfiddle.net/V4SVt/336/