jquery - 使用淡出效果从表格中删除行

Question

我有一个有一些行的表，每一行都有一个背景。有一个使用 jQuery 淡出删除指定行的按钮，但在操作过程中设计不好。单元格背景将是白色的。

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

这个jsfiddle更好地描述了我的问题。

Answer 1

下面的代码将实现一个缩小的行，然后隐藏它而不把背景变成白色

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

小提琴示例

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

您还可以hide()通过将其参数设置为隐藏时间来为函数设置动画

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

然而，这也受到“白色背景问题”的影响，因为它会为不透明度设置动画。

改编自http://blog.slaks.net/2010/12/animating-table-rows-with-jquery.html/至少在 Chrome 和 Firefox 中提供了一个很好的收缩而没有空白

小提琴

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

Answer 2

试试这个：

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

在这里工作小提琴：http: //jsfiddle.net/wnKXP/4/

您可以在“0.7”中设置不透明度

我希望它有所帮助。

Answer 3

只需将相同的背景添加到您申请表格行的表格，然后您将看不到任何行背景。

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

这是jsFiddle的链接

Answer 4

您只是隐藏该行而不是完全删除它。要从表中完全删除行并使用淡出效果，请使用此代码。

 $("#row").fadeOut("slow", function() {
             $("#row").remove();
          });

Answer 5

您可以使用.hide()代替.fadeOut()来避免此问题。

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

这是更新的jsFiddle 文件