javascript - 使用动画颜色文本更改前置表格淡入？

Question

我有一张 table

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

    });
}

我可以看到前置发生，但淡入和颜色变化没有发生。

我做错了什么？

---

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

您将淡入淡出应用于表格而不是行。要将 fadein 应用于行，在您的情况下这不是 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供使用假数据引用。