title: jQuery opacity animation distorting positioning in Internet Explorer
body: <p>I'm trying to implement a click-like effect on my horizontal tab menu using opacity property and jQuery animate function. Here is the code for doing this:</p>
  
  <pre><code>$(document).ready(function() {      
      $("div#header &gt; ul &gt; li").click(function(event) {
          $(this).animate({opacity: 0.7} ,"fast", "", function() {
              $(this).animate({opacity: 1} ,"fast");
          });
      });
  });
  </code></pre>
  
  <p>My problem happens on Internet Explorer 7 and 6. When animating using opacity properties, the tabs from my horizontal menu lose their initial positions.</p>
  
  <p><a href="http://www.cin.ufpe.br/~fjsj/bug.html" rel="nofollow noreferrer">Click here</a> to visit my website. To see the problem, click "Contato" and then click back in "Início" (sorry, it is written in portuguese, but you should be able to see the bug happen). Attention, until now I've detected this problem only in IE7/IE6!</p>
  
  <p>Thank you in advance!</p>