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

Question

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

我可以在特定行之后追加行，但无法为其添加任何效果。

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

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

Answer 1

这里的关键是，在 DOM 中已经存在某些内容之前，您不能执行任何动画。

因此，当您将 newData .after() 放在该行时，它会插入它并然后 对其进行动画处理，这不是行为你想要的。

你可以做的是向你添加的任何行添加一个类或样式，通过 CSS 隐藏它 - a la:

.hide{
    display: none;
}

然后，将其添加到 DOM 后，执行 .slideDown 或 .fadeIn。

您也可以在插入元素之前调用元素上的 .hide()，但我对此不确定，所以我不会在没有测试的情况下推荐它