Adjuntar y deslizar juntos jQuery

Question

Tengo este método de adición que hice para agregar más cuadros de entrada hasta que haya 10 de ellos que se desactivarán para 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('');  
    } 
}); 

Aunque, es bueno. Sin embargo, quiero poner en práctica un slideDown en lo que depende, he intentado hacer esto:

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

que no funciona en absoluto.

Answer 1

solución de SimpleCoder igual, 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 adjuntó. 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

Aunque 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 esto sería que cada enlace input obtendría una identificación en forma de una segunda clase, que sería muy útil para seleccionarlos en caso de que uno quiera eliminar un elemento, si uno accidentalmente agrega más de uno. También he agregado un efecto de fundido de salida en el elemento add-link para que el usuario no se confunda porque simplemente desapareció. Por supuesto, es solo una cuestión de gusto personal, pero me resulta más fácil de usar.

Espero que esto ayude.