我有一个有一些行的表,每行都有一个背景。有一个按钮用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);
});
});
然而,使用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();
});
});
});
试试这个:
$(document).ready(function(){
$(".btn").click(function(){
$("#row").fadeTo("slow",0.7, function(){
$(this).remove();
})
});
});
在这里工作小提琴:http://jsfiddle.net/wnKXP/4/
你可以在“0.7”中设置不透明度
我希望它有所帮助。
只需将相同的背景添加到您为表格行应用的表格中,然后就不会看到任何行背景。
$(document).ready(function(){
$(".remove").click(function(){
$(this).parents("tr").fadeOut();
});
});
这里是jsFiddle的链接
你可以使用.hide()
代替.fadeOut()
来避免这个问题。
$(document).ready(function(){
$(".btn").click(function(){
$("#row").hide();
});
});
这是更新的jsFiddle File
您只是隐藏行而不是完全删除它。要从表中完全删除行并使用淡出效果,请使用此代码。
$("#row").fadeOut("slow", function() {
$("#row").remove();
});