Zeile aus Tabelle mit FadeOut-Effekt entfernen

Question

Ich habe eine Tabelle, die einige Zeilen hat, jede Zeile hat einen Hintergrund. Es gibt eine Schaltfläche, die angegebene Zeile mit jQuery fadeOut entfernen, aber während der Operation wird das Design nicht gut.Zellen Hintergrund weiß sein.

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

Diese jsfiddle beschreibt mein Problem besser.

Answer 1

Der Code unten wird eine schrumpfende Zeile erreichen und dann verstecken, ohne den Hintergrund weiß

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

Fiddle example

Animieren Zeilenhöhe zu drehen doesnt gehen mit webkit jedoch alles reibungslos.

Sie können auch durch Einstellen seiner Parameter an die Zeit, um die hide() Funktion animieren

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

Das aber auch aus dem „weißen Hintergrund Problem“ leidet zu verstecken genommen, da es die Opazität beseelt.

von http://blog.slaks.net/2010/12/animating-table-rows-with-jquery.html/ Anpassung gibt einen schönen Schrumpfen ohne Leerraum in mindestens Chrome und 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

können Sie .hide() anstelle von .fadeOut() verwenden, um dieses Problem zu vermeiden.

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

hier wird der jsFiddle File aktualisiert

Answer 3

versuchen Sie dies:

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

Arbeits Geige hier: http://jsfiddle.net/wnKXP/4/

Sie kann die Opazität in "0.7" setzen

Ich hoffe es hilft.

Answer 4

Fügen Sie einfach den gleichen Hintergrund zu Ihrer Tabelle hinzu, den Sie für die Tabellenzeile angewendet haben, dann sehen Sie keinen Hintergrund für Zeilen.

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

hier ist der Link für jsFiddle