JQuery .slideDown没有在tr:last-child

时间:2016-09-09 09:55:42

标签: javascript jquery html animation

我正在尝试使用.slideDown为现有表添加“display:none”的表行设置动画。出现了新的tr,但它没有做任何动画。 FadeIn完美地工作。 我不知道该怎么做,我想使用那个特定的动画。

这是代码和jsfiddle:https://jsfiddle.net/p97ekp7g/1/

HTML

<div id="timesSection">
    <table id="tableTimes">
        <tr>
            <th class="number0">#</th>
            <th>E</th>
            <th>P</th>
        </tr>
        <tr>
            <td class="number1">1</td>
            <td>35</td>
            <td>91</td>
        </tr>
    </table>
</div>

的js

function insertAfterLastChild() {
    var i = 0;

    // search for last row
    $('table tr td:first-child').each(function () {
        var n = $(this).text();
        if (n > i) {
            i = n
        }
    });
    i++; // increase index to add code in a new row
    var stringClassNumber = 'number' + i;
    var string = '<tr style="display: none"><td class="' + stringClassNumber + '">' + i + '</td><td>10</td><td>10</td></tr>';

    $(string).appendTo($('#tableTimes tbody'));
    setTimeout(function () {
        $('#tableTimes tbody tr:last-child').slideDown(1000);
    }, 1000)
}

insertAfterLastChild();

谢谢。

0 个答案:

没有答案