Usuń wiersz z tabeli z efektem fadeOut

Question

Mam tabelę, która ma kilka wierszy, każdy wiersz ma tło. Istnieje przycisk, który usuwa określony wiersz za pomocą fadeOut jQuery, ale podczas operacji projekt nie działa poprawnie. Komórki będą białe.

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

Ten jsfiddle lepiej opisuje mój problem.

Answer 1

Poniższy kod będzie osiągnąć kurczy wiersz, a następnie ukryć je bez obracania tle biały

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

Fiddle example

Animowanie wysokość linia robi iść wszystko to jednak płynnie z webkitem.

Można też animować funkcję hide() przez ustawienie jego parametrów do czasu potrzebnego do ukrycia

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

To jednak również cierpi z „białym tle problemu”, ponieważ ożywia krycie.

Adaptacja od http://blog.slaks.net/2010/12/animating-table-rows-with-jquery.html/ daje ładny kurczenie bez białej przestrzeni w co najmniej Chrome i 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

można użyć .hide() w miejsce .fadeOut(), aby uniknąć tego problemu.

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

Oto aktualizowane jsFiddle File

Answer 3

spróbuj tego: skrzypce

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

pracuje tutaj: http://jsfiddle.net/wnKXP/4/

ty można ustawić krycie w "0,7"

Mam nadzieję, że to pomaga.

Answer 4

Po prostu dodaj to samo tło do tabeli, które zastosowałeś do wiersza tabeli, wtedy nie zobaczysz żadnego tła dla wierszy.

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

tu jest link do jsFiddle