$.fadeTo/fadeOut() operations on Table Rows in IE fail
- by Rick Strahl
Here’s a a small problem that one of customers ran into a few days ago: He was playing around with some of the sample code I’ve put out for one of my simple jQuery demos which deals with providing a simple pulse behavior plug-in: $.fn.pulse = function(time) {
if (!time)
time = 2000;
// *** this == jQuery object that contains selections
$(this).fadeTo(time, 0.20,
function() {
$(this).fadeTo(time, 1);
});
return this;
}
it’s a very simplistic plug-in and it works fine for simple pulse animations. However he ran into a problem where it didn’t work when working with tables – specifically pulsing a table row in Internet Explorer. Works fine in FireFox and Chrome, but IE not so much. It also works just fine in IE as long as you don’t try it on tables or table rows specifically. Applying against something like this (an ASP.NET GridView):
var sel =
$("#gdEntries>tbody>tr")
.not(":first-child") // no header
.not(":last-child") // no footer
.filter(":even")
.addClass("gridalternate");
// *** Demonstrate simple plugin
sel.pulse(2000);
fails in IE. No pulsing happens in any version of IE. After some additional experimentation with single rows and various ways of selecting each and still failing, I’ve come to the conclusion that the various fade operations in jQuery simply won’t work correctly in IE (any version). So even something as ‘elemental’ as this:
var el = $("#gdEntries>tbody>tr").get(0);$(el).fadeOut(2000);
is not working correctly. The item will stick around for 2 seconds and then magically disappear.
Likewise:
sel.hide().fadeIn(5000);
also doesn’t fade in although the items become immediately visible in IE. Go figure that behavior out.
Thanks to a tweet from red_square and a link he provided here is a grid that explains what works and doesn’t in IE (and most last gen browsers) regarding opacity:
http://www.quirksmode.org/js/opacity.html
It appears from this link that table and row elements can’t be made opaque, but td elements can. This means for the row selections I can force each of the td elements to be selected and then pulse all of those. Once you have the rows it’s easy to explicitly select all the columns in those rows with .find(“td”). Aha the following actually works:
var sel =
$("#gdEntries>tbody>tr")
.not(":first-child") // no header
.not(":last-child") // no footer
.filter(":even")
.addClass("gridalternate");
// *** Demonstrate simple plugin
sel.find("td").pulse(2000);
A little unintuitive that, but it works.
Stay away from <table> and <tr> Fades
The moral of the story is – stay away from TR, TH and TABLE fades and opacity. If you have to do it on tables use the columns instead and if necessary use .find(“td”) on your row(s) selector to grab all the columns.
I’ve been surprised by this uhm relevation, since I use fadeOut in almost every one of my applications for deletion of items and row deletions from grids are not uncommon especially in older apps. But it turns out that fadeOut actually works in terms of behavior: It removes the item when the timeout’s done and because the fade is relatively short lived and I don’t extensively test IE code any more I just never noticed that the fade wasn’t happening.
Note – this behavior or rather lack thereof appears to be specific to table table,tr,th elements. I see no problems with other elements like <div> and <li> items.
Chalk this one up to another of IE’s shortcomings.
Incidentally I’m not the only one who has failed to address this in my simplistic plug-in: The jquery-ui pulsate effect also fails on the table rows in the same way.
sel.effect("pulsate", { times: 3 }, 2000);
and it also works with the same workaround. If you’re already using jquery-ui definitely use this version of the plugin which provides a few more options…
Bottom line: be careful with table based fade operations and remember that if you do need to fade – fade on columns.© Rick Strahl, West Wind Technologies, 2005-2010Posted in jQuery
