Problems with slideDown in jQuery

Question

I’m having a problem that I have no idea what it might be, I understand very little of jQuery, in removing I managed to do the animation of .slideUp() but in adding that is a .append() I can’t make it work I tried several ways and it won’t, follows below the link with the codes.

http://jsfiddle.net/5ucD3/373/

Answer 1

The new element should come hidden so the slideDown can show it, add display:none online or in the class of the new element:

$(document).ready(function(){
    //when the Add Filed button is clicked
    $(".adicionarCampo").click(function () {
        //Append a new row of code to the "#items" div
        $(".lista").append('<div class="nomes" style="display:none"><input class="input-adicional" id="nome" name="nome[]" placeholder="Nome completo" type="text" /><a href="javascript:void(0)" class="delete"></a></div>');
        $(".nomes").slideDown("slow");
        $("body").animate({scrollTop: $("body").prop("scrollHeight")}, 500);
    });

    $("body").on("click", ".delete", function () {
        $(this).parent("div").slideUp("fast", function() {
            $(this).remove()    
        })
    });
});