Gibt es eine browserübergreifende Möglichkeit, die Opazität bei der Verwendung von jquery's clone() zu ignorieren?

Question

Ich verwende Tabellen in meinem Dokument, und ich möchte in der Lage sein, einen Benutzer ein neues Element zu einer Liste senden, dann wird es "automatisch" an der Spitze der Liste erscheinen (ja, das wäre einfacher mit DIVs aber arbeite mit dem, was ich habe).

ich jQuery bin mit und clone() eine Kopie der letzten Tabellenzeile zu erstellen, dann fadeIn() mit dem neuen Element anzuzeigen, nachdem ich es an die Spitze der Liste aktualisieren und hinzuzufügen. Da intern jQuery Elemente (unter der Annahme von DIVs) in "block" umwandelt, ändere ich auch die css-Klasse in "table-row". Es funktioniert gut.

Der gesamte Code ist hier:

var row = $("tbody tr:first").clone().hide(); // clone and then set display:none 
    row.children("td[class=td-date]").html("today"); 
// set some properties 
    row.children("td[class=td-data]").html("data"); 
    row.children("td[class=td-type]").html("type"); 
// fadeIn new row at the top of the table. 
    row.insertBefore("tbody tr:first").stop().fadeIn(2000).css("display","table-row"); 

Das Problem ist, dass wenn ich den Prozess zu schnell laufen - das heißt, bevor der fadeIn abgeschlossen ist, die „Klon()“ Befehl als auch die Opazität Klonen endet.

Ich kann es tatsächlich bekommen in Firefox arbeiten mit von der ersten Zeile oben anzupassen:

var row = $("tbody tr:first").clone().css("opacity","1").hide(); 

nun Meine Sorge ist, dass ich nicht sicher bin, dass irgendetwas davon effizient durchgeführt wird, und/oder Diese "Opazität" ist cross-browser-sicher, auf die man sich verlassen kann.

Hat jemand so etwas schon einmal gemacht, und können Sie irgendwelche Hinweise auf einen zuverlässigeren Ansatz bieten?

Answer 1

Opazität als Attribut jQuery CSS ist sicher Cross-Browser, wie es die Browser-Unterschiede bei der Umsetzung ausbügelt. Hier ist die Quelle

// IE uses filters for opacity 
if (!jQuery.support.opacity && name == "opacity") { 
    if (set) { 
    // IE has trouble with opacity if it does not have layout 
    // Force it by setting the zoom level 
    elem.zoom = 1; 

    // Set the alpha filter to set the opacity 
    elem.filter = (elem.filter || "").replace(/alpha\([^)]*\)/, "") + 
    (parseInt(value) + '' == "NaN" ? "" : "alpha(opacity=" + value * 100 + ")"); 
    } 

    return elem.filter && elem.filter.indexOf("opacity=") >= 0 ? 
    (parseFloat(elem.filter.match(/opacity=([^)]*)/)[1])/100) + '': ""; 
} 

Folgendes funktioniert. Working Demo - füge hinzu/bearbeite mit der URL, um damit zu spielen.

// stop previous animation on the previous inserted element 
    var prevRow = $("tbody tr:first").stop(true,true); 

    var row = prevRow.clone(); 
    row.children("td.td-date").text("today"); 
    row.children("td.td-data").text("data"); 
    row.children("td.td-type").text("type"); 

    row.fadeIn(2000).prependTo("tbody"); 

Answer 2

Ich denke, jQuery wird damit umgehen, wenn Sie dies tun.

var row = $("tbody tr:first").clone().fadeIn(0).hide(); 

Answer 3

Es gibt keinen Grund, ausblenden auf Ihrem Klon zu verwenden. Der Klon wird dem Dom noch nicht hinzugefügt, sodass er nicht sichtbar ist.

Versuchen Sie folgendes:

var row = $("tbody tr:first").clone(); // clone 
// set some properties 
row.children("td[class=td-date]").html("today"); 
row.children("td[class=td-data]").html("data"); 
row.children("td[class=td-type]").html("type"); 
// fadeIn new row at the top of the table. 
row.insertBefore("tbody tr:first").fadeOut(0).fadeIn(2000).css("display","table-row");