CODEWITHSUNDEEP
jqueryfadeout
Jake
Jake

Reputation: 11430

jQuery fadeOut not working in IE9

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>

Upvotes: 1

Views: 2218

Answers (2)

Ch&#39;marr
Ch&#39;marr

Reputation: 1282

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.

Upvotes: 0

jfriend00
jfriend00

Reputation: 707158

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/

Upvotes: 2

Related Questions