Existe-t-il une méthode multi-navigateur pour ignorer l'opacité lors de l'utilisation de clone() de jquery?

Question

J'utilise des tableaux dans mon document, et je veux pouvoir demander à un utilisateur de soumettre un nouvel élément à une liste, puis de l'afficher «automatiquement» en haut de la liste (oui, ce serait plus facile avec DIVs mais travaillant avec ce que j'ai). J'utilise jQuery et clone() pour créer une copie de la ligne de tableau la plus récente, puis en utilisant fadeIn() pour afficher le nouvel élément après l'avoir mis à jour et l'ajouter en haut de la liste. Parce que jQuery convertit en interne les éléments (en supposant que DIVs) à 'block', je change aussi la classe css en 'table-row'. Ça fonctionne bien.

Le code complet est ici:

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

Le problème est que si je lance le processus trop vite - à savoir avant la fadeIn complète, le « clone() » commande finit par clonage l'opacité ainsi.

je peux réellement faire fonctionner dans Firefox en utilisant en ajustant la première ligne ci-dessus:

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

Je crains maintenant que je ne suis pas sûr que tout cela est fait efficacement, et/ou cette "opacité" est sûre sur plusieurs navigateurs.

Est-ce que quelqu'un a déjà fait quelque chose comme ça, et peut offrir des conseils sur une approche plus fiable?

Answer 1

opacité comme un attribut css jQuery est sûr cross-browser comme il aplanit les différences de navigateur dans la mise en œuvre. Voici la source

// 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) + '': ""; 
} 

Les travaux suivants. Working Demo - ajoutez /éditez à l'URL pour jouer avec.

// 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

Je pense que jQuery le gérera si vous faites cela.

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

Answer 3

Il n'y a aucune raison d'utiliser hide sur votre clone. Le clone n'est pas encore ajouté à la dom donc il ne peut pas être visible.

Essayez ceci:

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