jQuery fadeOut not working in IE9

Question

Almost giving up after 2 days... .fadeOut() with jQuery 1.7.1 + IE9 does not work on the <tr> element. Can anyone else confirm if this is a known issue? Works in FF and Chrome.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7.1");</script>
<script type="text/javascript">
$("document").ready(function() {
    $("a.delete").click(function() {
        $(this).parent().parent().fadeOut();
        return false;
    });
});
</script>
<style>
    a, td { background-color: #ececec; padding: 5px; }
</style>
</head>
<body>

    <table>
    <tr><td><a class="delete" href="#">delete</a></td><td>apple</td></tr>
    <tr><td><a class="delete" href="#">delete</a></td><td>orange</td></tr>
    <tr><td><a class="delete" href="#">delete</a></td><td>pear</td></tr>
    </table>
</body>
</html>

EDIT: This updated code below will reveal more information about the issue. I found out that if your mouse moves away from the <tr> after click the <tr> will fadeOut correctly i.e. update its style

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7.1");</script>
<script type="text/javascript">
$(document).ready(function() {
    $("a.delete").click(function() {
        $(this).parent().parent().fadeOut();
        return false;
    });

    $("a.show").click(function() {
        $("tr").fadeIn();
    })

    $("a.delete-tr").click(function() {
        $("tr").each(function(i, e) {
            if($(e).css("display") != "none") {
                $(e).fadeOut();
                return false;
            }
        });
    })
});
</script>
<style>
    table { background-color: red; }
    a, td { background-color: #ececec; padding: 5px; }
</style>
</head>
<body>
    <p><a class="show" href="#">show</a></p>
    <p><a class="delete-tr" href="#">delete row</a></p>

    <table>
    <tr><td><a class="delete" href="#">delete</a></td><td>apple</td></tr>
    <tr><td><a class="delete" href="#">delete</a></td><td>orange</td></tr>
    <tr><td><a class="delete" href="#">delete</a></td><td>pear</td></tr>
    </table>
</body>
</html>

possible duplicate of [jQuery :FadeOUt not working with table Rows](http://stackoverflow.com/questions/944110/jquery-fadeout-not-working-with-table-rows) — j08691, Mar 02 '12 at 04:10
That was posted 2009 and I read some where *fadeIn()* was fixed in JQuery 1.6, so I had to give the benefit of the doubt that fadeOut() was fixed too. Hence repost to confirm (always blame myself before others). Anyways, I offer my edited code to better reveal the IE weirdness with regards to this issue. — Jake, Mar 02 '12 at 04:33
I'll just use the opacity hack for now. hope this doesn't gets closed in favor of the previous post. This one has better questions and answers I feel... — Jake, Mar 02 '12 at 05:03

jfriend00 · Accepted Answer · 2012-03-02T04:22:59.790

For reasons I do not understand (quirks with table rows in IE, I guess), the fadeOut() of the <tr> will work if you initially set it's opacity to 0.99 with a CSS rule. You can see it work in IE9 here:

http://jsfiddle.net/jfriend00/ZMunQ/

This is obviously a hack/work-around, but seems to work.

My guess would be that jQuery is using filter for the opacity setting (required for older versions of IE) and filters have a different effect on child objects than standard opacity.

Here's another work-around (less hackish that the earlier work-around) which works in IE9 (fade out the td tags instead and hide the tr at the end of the fade):

$("document").ready(function() {
    $("a.delete").click(function() {
        var once = false;
        var tr$ = $(this).closest('tr');
        tr$.find('td').fadeOut(function() {
            if (!once) {
                tr$.hide();
                once = true;
            }
        });
        return false;
    });
});

You can see it in action here: http://jsfiddle.net/jfriend00/ZMunQ/8/

I found out that if your mouse moves away from the `` after click the `` will fadeOut correctly i.e. update its style. — Jake, Mar 02 '12 at 04:46
I'll just use the opacity hack for now. hope this doesn't gets closed in favor of the previous post. This one has better questions and answers I feel... — Jake, Mar 02 '12 at 05:02

score 0 · Answer 2 · answered Sep 04 '12 at 19:50

I just ran into this bug, and found my own solution.

jQuery assumes that any element that has a width and height of 0 is already hidden, and therefore wont try and "hide" it again with a fade-out.

Look at the selector specification for ":hidden" to see what it considers hidden.

Now, why it was working in Firefox and Chrome is a different issue, but might be relevant to what you're doing. I am setting the width and height of my DIVs dynamically by examining the dimensions of an IMG file that is contained in it. I was using the direct .width and .height properties on the elements, which works in Firefox and Chrome, but IE likely doesnt set those properties for images, and for IE I was getting back 0. And, thus, the size of my DIVs was 0x0, and thus "hidden" in jQuery's mind.

The "proper" way is to use jQuery's .width() and .height() methods. jQuery will figure out the right thing to do for that browser.

jQuery fadeOut not working in IE9

2 Answers2