Append e Slide insieme jQuery

Question

ho questo metodo di aggiunta che feci aggiungere altre caselle di input finché c'è 10 di loro che disabiliterà nel rendere più.

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

Anche se, è bene. Tuttavia, voglio implementare uno slideDown quando dipendente, ho provato a fare questo:

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

Il che non funziona affatto.

Answer 1

La soluzione di come SimpleCoder, ma in una sola linea con 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/

Answer 2

append() restituisce un riferimento al selettore originale, non quello che è stato aggiunto. Penso che si sta cercando in questo modo:

$('.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 live:

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

Answer 3

Anche se la soluzione di SimpleCoder è perfettamente valida, lo farei in questo modo:

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 ragione sarebbe che ogni link input otterrebbe un ID nella forma di una seconda classe, che sarebbe venuto molto utile per loro la selezione nel caso in cui si voglia rimuovere un elemento, si dovrebbe accidentalmente aggiungere più di una necessità . Ho anche aggiunto un fade out effetto sull'elemento add-link modo che l'utente non venga confuso che appena scomparso. Naturalmente, è solo una questione di gusto personale, ma trovo più user-friendly.

Spero che questo aiuti.