Question

我在一个ajax成功函数上将html附加到<ul>。

HTML

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

Ajax成功

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

        }

在列表构建完成后，如何在整个<ul>中淡出？

Answer 1

试试这个

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
}

Answer 2

for (...

}
$("#revisionList").hide().fadeIn();

或许你可以在for循环之前隐藏它;无论什么效果最好。

Answer 3

首先必须使用CSS display属性隐藏它，或者如果您不想使用CSS，则必须使用style属性。

#revisionList{display: none;}

OR

<ul id="revisionList" style="display: none;">

然后在所有li完全登出后淡入。

$("#revisionList").fadeIn(500);

Ajax成功用fadeIn（）附加HTML

3 个答案: