CODEWITHSUNDEEP
jqueryinternet-explorer-9
Sergej Popov
Sergej Popov

Reputation: 3021

fadeIn doesn't work in IE9

It's the simplest think on earth but it doesn't work!! fadeIn function doesn't work in IE9? here is a demo: http://sergejpopov.com/test.htm

Any ideas? I found this: http://www.kevinleary.net/wp-samples/ie-fade-problems.php but couldn't figure out how they fixed it.

JS:

$(document).ready(function () {
            $(".a").click(function () {
                $(".b").fadeIn("500");
            });
        });

HTML:

<style type="text/css">
   .b{ display:none; background-color:#fff;}
</style>


<a href="javascript:void(0);" class="a" >aaa</a>
    <p class="b">bbb</p>

EDIT:

weird but fadeOut is working without any issues..

Upvotes: 2

Views: 2413

Answers (3)

Sergej Popov
Sergej Popov

Reputation: 3021

Ok so what i have figured out is that it breaks in IE9 if the display property set to none; and the only way to make it work is instead of setting display:none; to hide(); it on page load..

  $(document).ready(function () {
            $(".b").hide();
            $(".a").click(function () {
                $(".b").fadeIn(500);
                return false;
            });
            $(".c").click(function () {
                $(".d").fadeOut(500);
                return false;
            });
        });

Upvotes: 2

PeeHaa
PeeHaa

Reputation: 72652

$(document).ready(function () {
    $(".a").click(function () {
        $(".b").fadeIn(500);

        return false;
    });
});

<a href="#" class="a" >aaa</a>
<p class="b">bbb</p>

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

The duration should be an integer, try this

$(document).ready(function () {
            $(".a").click(function () {
                $(".b").fadeIn(500);
            });
        });

Upvotes: 0

Related Questions