Rimuovi riga dal tavolo con effetto dissolvenza

Question

Ho una tabella con alcune righe, ogni riga ha uno sfondo. C'è un pulsante che rimuove la riga specificata con jQuery fadeOut, ma durante l'operazione il design non ha uno sfondo good.cells sarà bianco.

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     $("#row").fadeOut(); 
    }); 
}); 

Questo jsfiddle descrive il mio problema in maniera migliore.

Answer 1

Il codice sottostante raggiungerà una fila contrazione e poi nasconderlo senza girare lo sfondo bianco

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     $("#row td").animate({'line-height':0},1000).hide(1); 
    }); 
}); 

Fiddle example

Animazione altezza della linea doesnt andare comunque tutto liscio con il webkit.

È inoltre possibile animare la funzione di hide() impostando il suo parametro al tempo impiegato per nascondere

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     $("#row").hide(1000); 
    }); 
}); 

Che però soffre anche il "bianco problema" dal momento che anima l'opacità.

Adattamento da http://blog.slaks.net/2010/12/animating-table-rows-with-jquery.html/ dà una bella contrazione senza spazio bianco in almeno Chrome e Firefox

Fiddle

$(document).ready(function() { 
    $(".btn").click(function() { 
     $('#row') 
      .children('td, th') 
      .animate({ 
      padding: 0 
     }) 
      .wrapInner('<div />') 
      .children() 
      .slideUp(function() { 
      $(this).closest('tr').remove(); 
     }); 
    }); 
}); 

Answer 2

è possibile utilizzare .hide() al posto di .fadeOut() per evitare questo problema.

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     $("#row").hide(); 
    }); 
}); 

Ecco la versione aggiornata di jsFiddle File

Answer 3

provare questo: violino

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     $("#row").fadeTo("slow",0.7, function(){ 
      $(this).remove(); 
     }) 
    }); 
}); 

lavorare qui: http://jsfiddle.net/wnKXP/4/

tu può impostare l'opacità in "0.7"

Spero che sia d'aiuto.

Answer 4

Basta aggiungere lo stesso sfondo alla tabella che hai applicato per riga della tabella, quindi non vedrai alcun sfondo per le righe.

$(document).ready(function(){ 
    $(".remove").click(function(){ 
    $(this).parents("tr").fadeOut(); 
    }); 
}); 

ecco il link per jsFiddle