使用jquery在特定行之后添加一行，并使用滑动效果

Adding a row after a particular row with slide down effect using jquery

本文关键字：一行 jquery 之后 使用 添加      更新时间：2023-09-26

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

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

$.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');;   
    });
});

我正在动态地生成行(子类别)并在特定行(类别)之后追加。如何在添加新行时添加渐变或滑动等效果?

这里的关键是你不能做任何动画，直到一些东西已经在DOM中。

所以当你把你的newData .after()行，它插入它和，然后动画它，这不是你想要的行为。

你所能做的就是添加一个类或样式到你添加的任何行，通过CSS隐藏它- la: 

.hide{
    display: none;
}

然后，当你完成添加到DOM，做你的.slideDown或.fadeIn。

您也可以在插入元素之前调用.hide()，但我不确定，所以我不建议在没有测试

的情况下使用它。
相关文章：