我有一个有一些行的表,每行都有一个背景.
有一个按钮用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);
- });
- });
然而,使用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中没有空白区域
- $(document).ready(function () {
- $(".btn").click(function () {
- $('#row')
- .children('td,th')
- .animate({
- padding: 0
- })
- .wrapInner('<div />')
- .children()
- .slideUp(function () {
- $(this).closest('tr').remove();
- });
- });
- });
