De agregación y de diapositivas juntos jQuery

Question

Tengo este método de agregación que hice para añadir más cuadros de entrada hasta que hay 10 de ellos que desactivar a hacer más.

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

Si bien, es bueno. Sin embargo, quiero poner en práctica un slideDown en lo que depende, he tratado de hacer esto:

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

Lo que no funciona en absoluto.

Answer 1

Al igual que la solución de SimpleCoder, pero en una sola línea usando appendTo():

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

Demostración: http://jsfiddle.net/V4SVt/336/

Answer 2

append() devuelve una referencia al selector original, no lo que se anexa. Creo que busca esto:

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

Demostración en directo:

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

Answer 3

A pesar de que la solución de SimpleCoder es perfectamente válido, lo haría así:

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

La razón de ello sería que cada input enlace obtendría una identificación en forma de una segunda clase, que vendría muy útil para la selección de ellos en caso de que se quiere eliminar un elemento, debe uno accidentalmente añadir más de uno necesita . También he añadido un efecto de fundido en el elemento add-link por lo que el usuario no se confunda que acaba de desaparecer. Por supuesto, es sólo una cuestión de gusto personal, pero me resulta más fácil de usar.

Espero que esto ayude.