Question

I am appending html to a <ul> on an ajax success function.

HTML

<ul id="revisionList">
  <!-- ajax.js will insert ordered list here based on number of revisions -->
</ul>

Ajax Success

success: function(json)
        {
            /*
            If successful build the list of revision links
            Links include link that will load images in next tab
            */

            //loop through revisions and display
            for(i = 0, j = json.revision_count.length; i < j; i++) {
                //count for revision number
                var k = i + 1;
                //revision number, does not match k
                var revisionID = json.revision_count[i].layout;
                $('#revisionList').append(
                    "<li><a onclick=\"initEditRevision(" + galleryID + ',' + revisionID + ")\" href=\"#editRev\" data-toggle=\"tab\">Revision " + k + "</a></li>"
                );
            }

        }

How do I go about fading in the whole <ul> after the list is built?

Answer 1

Try this

success: function(json) {
    var $list = $('#revisionList');
        $list.hide();  // Hide Here
    for (i = 0, j = json.revision_count.length; i < j; i++) {
        var k = i + 1;
        var revisionID = json.revision_count[i].layout;
        $list
            .append("<li><a onclick=\"initEditRevision(" + galleryID + ',' +  
                     revisionID + ")\" href=\"#editRev\"
                    data-toggle=\"tab\">Revision " + k + "</a></li>");
    }
    $list.fadeIn('slow'); // Fade In here
}​