javascript - Ajax 成功使用 fadeIn() 附加 HTML

Question

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

HTML

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

阿贾克斯成功

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

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

#revisionList{display: none;}

或者

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

然后淡入之后，所有li的都被完全附加了。

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