using slidedown() to show an newly appended element

Question

I am trying to create a fieldset that will append a file input field to a div AND use the slidedown() function to show the newly created field. This simple code does exactly what I need to do but I can't figure out how to integrate the slidedown action. I did come up with a solution that is almost there by hiding div#add_pic, appending the new field, then slidedown()ing it but it looks really bad. Does anyone have an elegant solution for this? Thanks!!

function add_file_input() {

$('div#add_pic').append("<label>Artist Pic:</label><input type='file' name='pics[]'><br     />");

}

$(document).ready(function(){

$('a#add_field').click(add_file_input);

})

Answer 1

Im not sure of the exact HTML Layout but I would wrap what you are appending in another div that is hidden then slide the newly added div down. like this

function add_file_input() {

   $('div#add_pic').append("<div class="addedDiv" style="display:none"><label>Artist Pic:</label><input type='file' name='pics[]'><br     /></div>");
   $('div.addedDiv').slideDown("slow");

}

$(document).ready(function(){

   $('a#add_field').click(add_file_input);

})