上一篇: setTimeout不能使用jquery.each,... 下一篇:jquery – 带函数的$.extend()

jquery – 使用fadeOut效果从表中删除行

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 使用fadeOut效果从表中删除行，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个有一些行的表,每行都有一个背景.
有一个按钮用jQuery fadeOut删除指定的行,但在操作过程中设计不好.单元格背景将为白色.

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

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

解决方法

下面的代码将实现缩小的行,然后隐藏它而不会将背景变为白色

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

Fiddle example

然而,使用webkit,动画线高度并没有那么顺利.

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

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

然而,它也受到“白色背景问题”的影响,因为它激发了不透明性.

从http://blog.slaks.net/2010/12/animating-table-rows-with-jquery.html/开始改编至少在Chrome和Firefox中没有空白区域

Fiddle

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