examples - Anexar y deslizar juntos jQuery

slidedown jquery ejemplos

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 inhabilitará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 implementar un slideDown cuando se adjunta, he intentado 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

Aunque la solución de SimpleCoder es perfectamente válida, 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'');
    }
});

El motivo sería que cada input enlace obtendría una ID en forma de una segunda clase, lo que resultaría muy útil para seleccionarlos en caso de que uno quiera eliminar un elemento, en caso de que uno agregue accidentalmente más de una necesidad. También he agregado un efecto de atenuación en el elemento de add-link para que el usuario no se confunda de que simplemente desapareció. Por supuesto, es solo una cuestión de gusto personal, pero me parece más fácil de usar.

Espero que esto ayude.

Answer 2

Como 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 3

append() devuelve una referencia al selector original, no a lo que se agregó. Creo que estas buscando 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");

Demo en vivo:

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