Javascript 使用jquery在具有向下滑动效果的特定行之后添加行

我需要设计一个树状的表结构，这样点击一个特定的行，它就会向下滑动并添加下面的新行。（仅设计类别和子类别结构。）

我可以在特定的行之后附加行，但不能添加任何效果

$.post("quoteConversionsByCategory.cfm",
{   
    action:1,
    categoryID:categoryID
},
function(response){
    var jsonResponse = JSON.parse(response);
     $.each(jsonResponse.DATA, function(i){
        var newData = $("<tr class='subcategoryrow' rel="+ jsonResponse.DATA[i][0] +" id=category"+ jsonResponse.DATA[i][0] +" parentID="+categoryID+" ><td colspan='1'>"+jsonResponse.DATA[i][1]+"</td></tr>");
        $("#category" + categoryID).after( newData ).fadeIn('slow');;   
    });
});

$.post（“quoteConversionsByCategory.cfm”，
{   
行动：1，
categoryID：categoryID
},
功能（响应）{
var jsonResponse=JSON.parse（response）；
$.each（jsonResponse.DATA，函数（i）{
var newData=$（“”+jsonResponse.DATA[i][1]+“”）；
$（“#category”+categoryID）.after（newData.fadeIn（'slow'）；；
});
});

---

我动态生成行（子类别）并在特定行（类别）后追加。在添加新行时，如何在此处添加淡入淡出或滑动等效果？

这里的关键是，在DOM中已有内容之前，您无法进行任何动画

因此，当您将

newData

.after（）

放入行后，它将插入该行，然后对其设置动画，这不是您想要的行为

您可以做的是将一个类或样式添加到您要添加的任何行中，该行通过CSS隐藏它-a la:

.hide{
    display: none;
}

然后，将其添加到DOM后，执行

.slideDown

或

.fadeIn

---

您也可以在插入元素之前对其调用

.hide（）

，但我不确定这一点，因此我建议您在未测试的情况下不要调用

.hide（）

，我认为您必须在调用

.after（）

之前调用

.hide（）