fadeOut(),animate() in'<div class=""></div>' is not very well. but '<div style=""></div>' is very well.

windows xp , jquery-1.3.2.min.js

I want to change 'opacity' from 0.1 to 0.2. In 'animate1' , div's opacity will up to 1 and then fade out to 0.2. 'animate2' is right.

please run these code in IE6,IE7,IE8:

          <style type="text/css">
         
.test{width:100px;height:100px;top:0px;left:0px;background-color:#000000;}
          .test1{filter:alpha(opacity=10);moz-opacity: 0.1;opacity:0.1;}
          .tips{font-weight:bold;font-size:14px;color:#ff0084;margin-top:20px}
        </style>
        <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){
              $('#animate1').click(function(){
                $('#test1').animate({opacity:0.2});
              });
              $('#animate2').click(function(){
                $('#test2').animate({opacity:0.2});
              });
            }
          );
        </script>
        <div class="tips">error:</div>
        <div id="test1" class="test test1"></div>
        <div>
          <input type="button" id="animate1" value="animate1"/>
        </div>
        <div class="tips">success:</div>
        <div id="test2" class="test"
style="filter:alpha(opacity=10);moz-opacity: 0.1;opacity:0.1;"></div>
        <div>
          <input type="button" id="animate2" value="animate2"/>
        </div>