Wie man die erste Reihe von Tabellen für 2 Sekunden hervorhebt und in den Originalzustand zurückkehrt

Question

Ich habe eine Tabelle, in der, sobald ich eine Zeile hinzufüge, sich die Hintergrundfarbe ändert, um die Änderungen anzuzeigen (Hervorheben wäre gut). Hier ist, was ich mache

$("#tableDg tbody tr:first").css("background-color", "red")

Also, um die Verzögerung zum Funktionieren zu bringen, habe ich Folgendes gemacht

$("#tableDg tbody tr:first").css("background-color", "red").delay(2000).css("background-color", "aqua");

aber anstatt zu verzögern, wird einfach die Hintergrundfarbe zu Aqua geändert. Irgendwelche Kommentare, was ich hier tun kann? Danke

Answer 1

$("#tableDg tbody tr:first").css("background-color", "red");

setTimeout(function() {
    $("#tableDg tbody tr:first").css("background-color", "aqua");
}, 2000);

Um den Hervorhebungseffekt hinzuzufügen:

$("#tableDg tbody tr:first").css("background-color", "red");

setTimeout(function() {
    $("#tableDg tbody tr:first").css("background-color", "aqua").effect("highlight", {}, 3000);
}, 2000);

Oder dies:

$("#tableDg tbody tr:first").css("background-color", "red");

setTimeout(function() {
    $("#tableDg tbody tr:first").css("background-color", "aqua");
    $('#tableDg tbody tr:first').effect("highlight", {}, 3000);
}, 2000);

Answer 2

Vielleicht hilft das: Ich habe ein Datenattribut zur Zeile hinzugefügt, um diejenige hervorzuheben, die ich möchte, also nannte ich es data-id.

1. Holen Sie sich die Original-Hintergrundfarbe
2. Animiere zur Hervorhebungsfarbe
3. Warten Sie 500 Millisekunden
4. Animieren Sie zur Originalfarbe (ausblenden)

5. Entfernen Sie den Stil, damit das Stylesheet seine Arbeit machen kann.

   var highlight_color = "#fbec88";
   var original_color = $('#myTable tbody tr[data-id="' + id + '"]').css("background-color");
   
   $('#myTable tbody tr[data-id="' + id + '"]')
   .animate({
   'background-color': highlight_color
   }, 'slow', 'swing')
   .delay(500)
   .animate({
   'background-color': original_color
   }, 'slow', 'swing', function () { 
                       $('#myTable tbody tr[data-id="' + id + '"]').removeAttr("style"); 
                   });

Answer 3

Wenn Sie eine einzelne Verzögerung benötigen, sollten Sie setTimeout(function(){//code}, timeout); verwenden.