使用fadeOut效果从表中删除行 [英] Remove row from table with fadeOut effect

问题描述

我有一个表有一些行，每行有一个背景。
有一个按钮，删除指定的行与jQuery fadeOut，但在操作设计不good.cells背景将是白色的。

I have a table that has some rows,each row has a background. There is a button that remove specified row with jQuery fadeOut, but during the operation the design doesn't good.cells background will be white.

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

此 jsfiddle 更好地描述我的问题。

This jsfiddle describes my problem better.

推荐答案

下面的代码将实现收缩行，打开背景白色

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示例

然而，使用webkit的动画线高度并没有那么顺利。

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

hide（）函数，将其参数设置为隐藏时间

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.

根据 http：//进行调整blog.slaks.net/2010/12/animating-table-rows-with-jquery.html/ 在至少Chrome和Firefox中提供了一个不带空格的缩小窗口

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

小提琴

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

这篇关于使用fadeOut效果从表中删除行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！