Home/ Questions/Q 7598915
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T22:31:46+00:00

Almost giving up after 2 days… .fadeOut() with jQuery 1.7.1 + IE9 does not

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0