jQuery opacidade animação distorcendo posicionamento no Internet Explorer

Question

Eu estou tentando implementar um efeito click-like no meu menu guia horizontal usando opacidade propriedade e função animar jQuery. Aqui está o código para fazer isso:

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

Meu problema acontece no Internet Explorer 7 e 6. Quando a animação usando as propriedades de opacidade, as abas do meu menu horizontal perder suas posições iniciais.

Clique aqui para visitar o meu site. Para ver o problema, clique em "Contato" e, em seguida, clique novamente em "Início" (desculpe, está escrito em português, mas você deve ser capaz de ver o erro acontecer). Atenção, até agora eu detectado este problema só no IE7 / IE6!

Agradecemos antecipadamente!

Answer 1

Eu acredito que era apenas um bug envolvendo opacidade e Internet Explorer, desde IE não tem suporte opacidade. De jQuery documentação de jQuery.support.opacity atributo:

opacidade: É igual a verdade se um navegador pode interpretar corretamente a opacidade propriedade de estilo (é atualmente falso em IE, ele usa alfa filtros em vez disso).

Para evitar o erro e ainda ter o efeito em navegadores compatíveis, eu embrulhou o código de animação dentro da seguinte condição:

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