Anfügen und Slide zusammen jQuery

Question

Ich habe diese Methode append, die ich gemacht mehr Eingabefelder hinzufügen, bis es 10 von ihnen, die mehr in die Herstellung deaktivieren wird.

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

Obwohl, es ist gut. Allerdings möchte ich eine slidedown implementieren, wenn angehängt, ich habe versucht, dies zu tun:

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

Welche überhaupt nicht funktionieren.

Answer 1

Wie SimpleCoder-Lösung, sondern nur in einer Linie mit 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() einen Verweis auf den ursprünglichen Wähler zurückkehrt, nicht, was angehängt. Ich glaube, Sie für diese suchen:

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

Live-Demo:

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

Answer 3

Obwohl SimpleCoder-Lösung perfekt gültig ist, ich es so tun würde:

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

Der Grund dafür wäre, dass jeder Link input eine ID in Form einer zweiten Klasse bekommen würde, was sie für den Fall, man will für die Auswahl sehr nützlich sein würde, ein Element zu entfernen, sollte man versehentlich fügen Sie mehr als man braucht . Ich habe auch eine Fade-out-Effekt auf dem add-link Elemente hinzugefügt, damit der Benutzer nicht verwirrt bekommt, dass es einfach verschwunden. Natürlich ist es nur eine Frage des persönlichen Geschmacks, aber ich es benutzerfreundlich.

Hope, das hilft.