带有动画颜色文本的前置表fadeIn是否更改？

Question

我有一张桌子

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);
        }

    });
}

我可以看到前置发生了，但是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>

Answer 1

您已将淡入应用于表而不是行。若要将fadingin应用于行（在您的情况下不是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以供使用伪造数据参考。