CODEWITHSUNDEEP
jqueryinternet-explorerfadeout
markzzz
markzzz

Reputation: 47945

Why doesn't this fadeOut() work in Internet Explorer?

Tested on IE7, IE8, IE9... and the fadeOut() is not applied :

<table>
    <tr class="sideOn hidden">
        <td class="trackBotton">
            <input type="submit" value="Remove" onClick="remSide(this);return false" />
        </td>        
    </tr>
</table>

function remSide(param) {
    $(param).parents('.sideOn').fadeOut(500, function() {
           $(this).remove();
    });
}

Why is this and how can I fix this problem?

Also removing the remove() doesn't work:

function remSide(param) {
    $(param).parents('.sideOn').fadeOut(500);
}

Upvotes: 1

Views: 1668

Answers (2)

Guffa
Guffa

Reputation: 700182

JQuery uses filters to do the fading in Internet Explorer, and filters only apply to elements that has layout.

You can give the table row layout like this:

.sideOn { position: absolute; }

Then the elements fade in Internet Explorer, but changing the position style of a table row is not recommended, so you should use some other element for what you want to fade.

Upvotes: 5

No Results Found
No Results Found

Reputation: 102735

Guffa had it right with his answer - so I'd like to offer an alternative (workaround for IE, that is):

function remSide(param) {
    $(param).parents('.sideOn').find('td').fadeOut(500, function() {
           $(this).parent().remove();
    });
}

This fades out all the <td>s, then removes the <tr> itself. Seems to work fine in IE8.

Demo: http://jsfiddle.net/B7ndq/3/

Upvotes: 1

Related Questions