Remove row from table with fadeOut effect
Solution 1
The below code will achieve a shrinking row and then hide it without turning the background white
$(document).ready(function(){
$(".btn").click(function(){
$("#row td").animate({'line-height':0},1000).hide(1);
});
});
Animating line height doesnt go all that smoothly with webkit however.
You can also animate the hide()
function by setting its parameter to the time taken to hide
$(document).ready(function(){
$(".btn").click(function(){
$("#row").hide(1000);
});
});
That however also suffers from the "white background problem" since it animates the opacity.
Adapting from http://blog.slaks.net/2010/12/animating-table-rows-with-jquery.html/ gives a nice shrinking without white space in at least Chrome and Firefox
$(document).ready(function () {
$(".btn").click(function () {
$('#row')
.children('td, th')
.animate({
padding: 0
})
.wrapInner('<div />')
.children()
.slideUp(function () {
$(this).closest('tr').remove();
});
});
});
Solution 2
try this:
$(document).ready(function(){
$(".btn").click(function(){
$("#row").fadeTo("slow",0.7, function(){
$(this).remove();
})
});
});
working fiddle here: http://jsfiddle.net/wnKXP/4/
you can set opacity in "0.7"
I hope it helps.
Solution 3
You are just hiding the row and not removing it completely. To remove the row completely from the table and also using fadeout effect use this code.
$("#row").fadeOut("slow", function() {
$("#row").remove();
});
Solution 4
Just add the same background to your table which you applied for table row then you will not see any background for rows.
$(document).ready(function(){
$(".remove").click(function(){
$(this).parents("tr").fadeOut();
});
});
here is the link for jsFiddle
Saman Gholami
I am a lifetime learner, who is always using the latest techniques and technologies as well as I can.
Updated on April 21, 2020Comments
-
Saman Gholami about 4 years
I have a table that has some rows,each row has a background. There is a button that remove specified row with jQuery fadeOut, but during the operation the design doesn't good.cells background will be white.
$(document).ready(function(){ $(".btn").click(function(){ $("#row").fadeOut(); }); });
This jsfiddle describes my problem better.
-
DGS over 10 yearsincluded another solution
-
Saman Gholami over 10 yearsThis solution is very tricky but worked good.Thank you for your effort
-
CodingInTheUK over 6 yearsThats nice, but what about different row colours? I think background on tr fade out td and slide up tr before finally remove tr, or would that be too much?