Мне нужно создать дерево, подобное структуре таблицы, чтобы щелкнуть по определенной строке, чтобы она скользнула вниз и добавила новые строки ниже. (Просто проектирование структуры категорий и подкатегорий.)
Я могу добавлять строки после определенной строки, но не могу добавить к ней никакого эффекта.
$.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 - a la:
.hide{
display: none;
}
Затем, когда вы закончите добавлять его в DOM, сделайте свой .slideDown
или .fadeIn
.
Вы также можете вызвать .hide()
на элементе перед его вставкой, но я не уверен в этом, поэтому я не буду рекомендовать его без тестирования
.hide()
перед.after()
вызов