Animation d'opacité jQuery déformation du positionnement dans Internet Explorer

Question

J'essaie d'implémenter un effet de type clic sur mon menu de l'onglet horizontal en utilisant la propriété opacity et la fonction d'animation jQuery. Voici le code pour ce faire:

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

Mon problème se produit sur Internet Explorer 7 et 6. Lorsque vous animez en utilisant les propriétés d'opacité, les onglets de mon menu horizontal perdent leurs positions initiales.

Click here pour visiter mon site web. Pour voir le problème, cliquez sur "Contato" puis sur "Início" (désolé, il est écrit en portugais, mais vous devriez être capable de voir le bug arriver). Attention, jusqu'à présent, j'ai détecté ce problème uniquement dans IE7/IE6!

Merci d'avance!

Answer 1

Je crois que c'était juste un bug impliquant l'opacité et Internet Explorer, puisque IE n'a pas de support d'opacité. De jQuery documentation de jQuery.support.opacity attribut:

opacité

: Est égal à true si un navigateur peut interpréter correctement la propriété de style opacité (est actuellement faux dans IE, il utilise des filtres alpha au lieu).

Pour éviter le bug et ont encore l'effet sur les navigateurs compatibles, j'ai enveloppé le code d'animation dans la condition suivante:

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