Remove row from table with fadeOut effect

The below code will achieve a shrinking row and then hide it without turning the background white

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

Fiddle example

Animating line height doesnt go all that smoothly with webkit however.

You can also animate the hide() function by setting its parameter to the time taken to hide

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

That however also suffers from the "white background problem" since it animates the opacity.

Adapting from http://blog.slaks.net/2010/12/animating-table-rows-with-jquery.html/ gives a nice shrinking without white space in at least Chrome and Firefox

Fiddle

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

try this:

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

working fiddle here: http://jsfiddle.net/wnKXP/4/

you can set opacity in "0.7"

I hope it helps.