jQuery: fadeIn and fadeOut for IE8

Tweet

If you have used jQuery fadeIn and fadeOut effects, you might have noticed that they don't always work on IE8.
There's a solution for that issue: in this very short article we are going to explore it.

I don't think I have to explain much about it, so I will get into it very quickly and shortly.

If we have an element to which we applied a fade effect using jQuery, we should have something like:

<div id="fading" style="display:none;">Some content</div>

in the body of our page.

In the head we control the fade effect. In the following example we create the fadeIn effect on the click event (on some other element with id="sometrigger"):

<script type="text/javascript" language="javascript">
<!--
$(document).ready(function(){

    $("#sometrigger").click(function(){
        $("#fading").fadeIn();
});
// -->
</script>

If you test the above code in IE8, the div with id="fading" will just appear without the fading effect.
In order to solve the issue, we just need to add a CSS rule to the fading div:

<div id="fading" style="display:none;filter:inherit;">Some content</div>

As you can see we added:

filter:inherit;

The above rule will make the fading effect work on IE8 as well.

Enjoy!