Добавить и скользить вместе jQuery

Question

У меня есть этот метод добавления, который я сделал, чтобы добавить больше входных ящиков до тех пор, пока не будет 10 из них, что отключится в создание большего.

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

Хотя это хорошо. Тем не менее, я хочу реализовать Slidedown при добавлении, я пытался сделать это:

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

Который вообще не работает.

Answer 1

Как решение Simplecoder, но только в одной линии, используя appendTo():

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

Демо: http://jsfiddle.net/v4svt/336/

Answer 2

append() Возвращает ссылку на оригинальный селектор, а не то, что было добавлено. Я думаю, что вы ищете это:

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

Живая демонстрация:

http://jsfiddle.net/v4svt/2/

Answer 3

Хотя решение SimpleCoder совершенно действует, я бы сделал это так:

i = 0;
$('#add-link').click(function() {   
    if(i < 9) {
        $('.insert-links').append('<div style="display: none;" class="new-link link_' + i + '" name="link[]"><input type="text" /></div>');
        $('.link_' + i).slideDown("fast");
        i++;
    }
    if(i == 9) {
        $('#add-link').fadeOut('200');
    }
});

Причина этого будет то, что каждая ссылка input Получил бы идентификатор в виде второго класса, который пришел бы очень удобным для выбора их в случае, если кто-то хочет удалить элемент, должен случайно добавлять более одного потребностей. Я также добавил эффект исчезновения на add-link Элемент, поэтому пользователь не путает, что он просто исчез. Конечно, это просто вопрос личного вкуса, но я нахожу его более удобным для пользователя.

Надеюсь это поможет.