fadeIn does not work when css transparency defined

fadeIn does not work when css transparency defined

I tried the following code and it seemed like fadeIn() didn't work when the image has trasparency defined for it. i tested with IE8. Is this intended?
 
  1. <html>
  2. <head>
  3.         <style>
  4.                 .style1 {display:block; opacity:0.4; filter:alpha(opacity=10); width: 200; height: 200}
  5.                 .style2 {display:none; width: 200; height: 200}
  6.         </style>
  7.         <script type="text/javascript" src="jquery-1.4.2.js"></script>
  8.         <script type="text/javascript">
  9.                 $(document).ready(function() {
  10.                         $('#alert').click(function() {
  11.                                 //uncomment next two lines, fadeIn() kicked as transparency was removed
  12.                                 //$(this).removeClass("style1");
  13.                                 //$(this).addClass("style2");
  14.                                 $(this).fadeIn(10000);
  15.                         });
  16.                 });
  17.         </script>
  18. </head>
  19. <body>
  20.         <img id="alert" class="style1" src="1.jpeg">
  21. </body>
  22. </head>