jQuery: нежелательное мгновенное скольжение слайдов без анимации - PullRequest
Новая
       6

jQuery: нежелательное мгновенное скольжение слайдов без анимации

3 голосов
/ 29 января 2012

Я написал короткий метод для добавления строк в таблицу. Это выглядит следующим образом: 

/*--------------------------------------------------*/
/* Append a row to the documentation heading table. */
/*--------------------------------------------------*/
function append_heading(heading, style, default_content, node_enabled, leaf_enabled)
{
    // Grab the table body.
    var tbody = $("#headings_table_body");

    // Generate our cells.
    var headingCell = $('<td class="heading_column"></td>');
    var styleCell = $('<td class="style_column"></td>');
    var defaultCell = $('<td class="default_column"></td>');
    var nodesCell = $('<td class="nodes_column ticked"></td>');
    var leavesCell = $('<td class="leaves_column ticked"></td>');

    // Fill in various cells.
    headingCell.append(heading);
    styleCell.append(style);
    defaultCell.append(default_content);

    // Tick some cells cross the others.
    if(node_enabled)
    {
        nodesCell.addClass("ticked");
    }

    else
    {
        nodesCell.addClass("crossed");
    }

    if(leaf_enabled)
    {
        leavesCell.addClass("ticked");
    }

    else
    {
        leavesCell.addClass("crossed");
    }

    // Add all the cells to one big row.
    var tr = $("<tr></tr>")
        .append(headingCell)
        .append(styleCell)
        .append(defaultCell)
        .append(nodesCell)
        .append(leavesCell);

    // Append the row to the table.
    tbody.append(tr);

    $(tr).hide();
    $(tr).slideDown("slow");
}

Добавляет строки, как и ожидалось, все красиво заполнено и оформлено. Проблема в том, что slideDown не анимируется: его текущее поведение аналогично тому, как я вызываю hide () и show (), оно просто появляется. Как я могу получить это, чтобы оживить правильно? Любая помощь приветствуется, спасибо.

Ответы [ 2 ]

5 голосов
/ 29 января 2012

jQuery НЕ умеет анимировать таблицы напрямую. Все, что вам нужно - это обернуть содержимое каждой ячейки td в строке в div с помощью display: none и создать для них анимацию slideDown! Чтобы облегчить тебе жизнь:))) 

 tr.find('td').wrapInner('<div style="display: none;" />');
 tr.appendTo(tbody);
 tr.find('td > div')
             .slideDown('slow', function(){
                  var $set = $(this);
                  $set.replaceWith($set.contents());
             });

Если вы хотите анимировать всю таблицу, она должна быть помещена в div с анимацией, примененной к этому div.

0 голосов
/ 29 января 2012

Я предполагаю, что это потому, что он не знает высоту добавленного TR, попробуйте явно определить высоту TR в вашем CSS или измените код, чтобы сделать 

$(tr).height($(tr).height());
$(tr).hide();
$(tr).slideDown("slow");
...