我有一个表,它有一些行,每行都有一个背景。有一个按钮可以用jQuery fadeOut删除指定的行,但在操作过程中,设计不好。单元格背景将是白色的。
$(document).ready(function(){
$(".btn").click(function(){
$("#row").fadeOut();
});
});
这个jsfiddle更好地描述了我的问题。
试试这个:
$(document).ready(function(){
$(".btn").click(function(){
$("#row").fadeTo("slow",0.7, function(){
$(this).remove();
})
});
});
工作小提琴在这里:http://jsfiddle.net/wnKXP/4/
您可以在"0.7"中设置不透明度
我希望它能有所帮助。
下面的代码将实现一个收缩行,然后隐藏它,而不将背景变成白色
$(document).ready(function(){
$(".btn").click(function(){
$("#row td").animate({'line-height':0},1000).hide(1);
});
});
Fiddle示例
然而,使用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 中提供了一个很好的无空白收缩
Fiddle
$(document).ready(function () {
$(".btn").click(function () {
$('#row')
.children('td, th')
.animate({
padding: 0
})
.wrapInner('<div />')
.children()
.slideUp(function () {
$(this).closest('tr').remove();
});
});
});
您只是隐藏了行,并没有完全删除它。要从表中完全删除该行并使用淡出效果,请使用以下代码。
$("#row").fadeOut("slow", function() {
$("#row").remove();
});
只需将应用于表行的相同背景添加到表中,就不会看到任何行的背景。
$(document).ready(function(){
$(".remove").click(function(){
$(this).parents("tr").fadeOut();
});
});
这是jsFiddle 的链接
您可以使用.hide()
代替.fadeOut()
来避免此问题。
$(document).ready(function(){
$(".btn").click(function(){
$("#row").hide();
});
});
这是更新的jsFiddle文件