【问题标题】：Prepend table fadeIn with animate color text change?在表格 fadeIn 之前添加动画颜色文本更改？
【发布时间】：2019-07-19 04:25:25
【问题描述】：

我有一张桌子

function updateQueueTable(sessionName) {

    console.log("updateQueueTable executed ... ");

    var ajax = $.ajax({url: '/client-summary/' + sessionName + '/queue'});

    ajax.done(function (responses) {

        console.log('responses = ', responses);

        $('#queueTable').empty();

        for (i = 0; i < responses.length; i++) {

            let row = `
            <tr >
            <td>${responses[i].flow_type}</td>
            <td><a href="/client-summary/${responses[i].session_name }">${responses[i].session_name }</a></td>
            <td>${responses[i].vlan}</td>
            <td>${responses[i].source_ip}</td>
            <td>${responses[i].tunnel_endpoint}</td>
            <td>${responses[i].ue_mac}</td>
            <td>${responses[i].ue_type}</td>
            <td>${responses[i].action}</td>
            </tr>

            `;

            //**/console.log(row);

            $('#queueTable').prepend(row).fadeIn('slow').animate({ color: "#FFCD56" }, 1400).animate({ color: "white" }, 1400);
        }

    });
}

我可以看到 prepend 正在发生，但 fadeIn 和颜色变化没有。

我做错了什么？

HTML

<table class="table table-responsive-sm">
    <thead>
        <tr>

            <th width="10%">Type</th>
            <th width="10%">Session Name</th>
            <th width="5%">VLAN</th>
            <th width="15%">Tunnel Source IP</th>
            <th width="15%">Tunnel Dest IP</th>
            <th width="15%">MAC Address</th>
            <th width="15%">Tunnel Type</th>
            <th width="15%">Action</th>

        </tr>
    </thead>
    <tbody id="queueTable">


        
    </tbody>
</table>

【问题讨论】：

你能添加#queueTable的html吗？
@justDan 我添加了，你可以看看。 ?
您希望淡入表格或行吗？代码正在淡化表格。
我希望淡入刚刚插入的新行。

标签： javascript jquery html css html-table

【解决方案1】：

您将淡入淡出应用于表格而不是行。要将淡入淡出应用于在您的情况下不是 jquery 元素的行，行必须是 jquery 元素。下面是代码的样子：

for (i = 0; i < responses.length; i++) {

    let row = $('<tr style="display:none;">');

    let tds = `            
            <td>${responses[i].flow_type}</td>
            <td>
            <a href="/client-summary/${responses[i].session_name }">${responses[i].session_name }</a>
            </td>
            <td>${responses[i].vlan}</td>
            <td>${responses[i].source_ip}</td>
            <td>${responses[i].tunnel_endpoint}</td>
            <td>${responses[i].ue_mac}</td>
            <td>${responses[i].ue_type}</td>
            <td>${responses[i].action}</td>
            `;
    row.html(tds);

    //**/console.log(row);

    $('#queueTable').append(row);
    row.fadeIn('slow').animate({
      color: "#FFCD56"
    }, 1400).animate({
      color: "white"
    }, 1400);
  }

Here is a working fiddle 供参考使用假数据。

【讨论】：