Добавление строки после определенной строки с эффектом скольжения с помощью jquery

Question

Добавление строки после определенной строки с эффектом скольжения с помощью jquery

0

Мне нужно создать дерево, подобное структуре таблицы, чтобы щелкнуть по определенной строке, чтобы она скользнула вниз и добавила новые строки ниже. (Просто проектирование структуры категорий и подкатегорий.)

Я могу добавлять строки после определенной строки, но не могу добавить к ней никакого эффекта.

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

Я динамически генерирую строки (подкатегории) и добавляю их после определенной строки (Категория). Как добавить эффект, например, при постепенном добавлении новых строк?

Deepak Kumar Padhy 21 март 2014, в 15:38

Источник

0

Я думаю , вы должны вызвать .hide() перед .after() вызов
Ian 21 март 2014, в 14:20

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Я думаю , вы должны вызвать .hide() перед .after() вызов

rockerest · Answer 1 · 2014-03-21T11-48-00.000Z

Ключевым моментом здесь является то, что вы не можете делать анимации, пока что-то уже в DOM.

Поэтому, когда вы помещаете newData .after(), она вставляет ее, а затем анимирует ее, что не является поведением, которое вы хотите.

Что вы можете сделать, так это добавить класс или стиль в любую добавляемую строку, которая скрывает ее через CSS - a la:

.hide{
    display: none;
}

Затем, когда вы закончите добавлять его в DOM, сделайте свой .slideDown или .fadeIn.

Вы также можете вызвать .hide() на элементе перед его вставкой, но я не уверен в этом, поэтому я не буду рекомендовать его без тестирования