Why can't I fade out this table row in IE using jQuery?

StackOverflow https://stackoverflow.com/questions/2437026

Question

I can't get the table row to fade out in IE. It works in Chrome, but not IE. It just becomes really 'light' and stays on the screen. I tried IE8 with and without compatibility mode.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

function hideIt()
{
    $('#hideme').fadeTo("slow", 0.0);
}

</script>
</head>
<body>
<table>
 <tr id='hideme'>
  <td>Hide me!</td>
 </tr>
</table>
<button onclick='hideIt();'>Hide</button>
</body>
</html>

Is there a workaround/solution for a smooth fade?

Was it helpful?

Solution

Yeah, that's a bug (feature?) in IE. If you apply it to the td elements instead of the tr, you'll get the desired effect. So,

$('#hideme>td').fadeTo("slow", 0.0);

OTHER TIPS

Here is what I ended up doing, and it worked pretty good in everything, although quite complicated (and with some bugs - more on that in a minute - see if you can spot it):

function FadeInFrom(item,from_bg,from_fg,call)
{
    $to_bg = $(item).css('background-color');
    $(item).css('background-color',from_bg);

    $to_fg = $(item + '>td').css('color');
    $(item + '>td').css('color',from_fg);

    var anim = {};
    anim['backgroundColor'] = $to_bg;

    $(item).animate(anim,'slow');

    var anim2 = {};
    anim2['color'] = $to_fg;

    $(item + '>td').animate(anim2,'slow');
}

What this does is get the current color of the item, and then animates it to that color from the specified colors.

As for that bug, if you try the code above, you will notice that links and other DOM items may not be animated correctly by this. I leave it up to someone to try to find a solution for that.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top