Question

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

$(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);
    });
});

Fiddle example

然而动画线高度并没有顺利完成。

您还可以通过将其参数设置为隐藏时间

来为hide()功能设置动画

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

然而，这也受到白色背景问题的困扰＆＃34;因为它激发了不透明度。

从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();
        });
    });
});

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

只需将相同的背景添加到您为表格行应用的表格中，然后就不会看到任何行背景。

<ion-header-bar  class="bar bar-header bar-stable" no-tap-scroll="true">
    <a class="button icon-left ion-chevron-left button-clear button-positive">{{'homePage' | i18n}}
    </a>
    <h1 class="title">Recent</h1>
    <ng-icon type="messenger-left-header-icons" non-pressable="true" class="icon_plus"></ng-icon>
</ion-header-bar>

这是jsFiddle

的链接

Answer 4

您可以在.hide()的位置使用.fadeOut()来避免此问题。

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

这是更新后的jsFiddle File

Answer 5

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

throw

使用fadeOut效果从表中删除行

5 个答案: