jQuery opacity animation distorting positioning in Internet Explorer

Question

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:

$(document).ready(function() {      
    $("div#header > ul > li").click(function(event) {
        $(this).animate({opacity: 0.7} ,"fast", "", function() {
            $(this).animate({opacity: 1} ,"fast");
        });
    });
});

My problem happens on Internet Explorer 7 and 6. When animating using opacity properties, the tabs from my horizontal menu lose their initial positions.

Click here 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!

Thank you in advance!

Answer 1

I believe it was just a bug involving opacity and Internet Explorer, since IE doesn't have opacity support. From jQuery documentation of jQuery.support.opacity attribute:

opacity: Is equal to true if a browser can properly interpret the opacity style property (is currently false in IE, it uses alpha filters instead).

To avoid the bug and still have the effect on compatible browsers, I've wrapped the animation code within the following condition:

if ($.support.opacity) {
//animation code
}