jQuery 不透明度动画在 Internet Explorer 中扭曲定位答案

【问题标题】：jQuery opacity animation distorting positioning in Internet ExplorerjQuery 不透明度动画在 Internet Explorer 中扭曲定位
【发布时间】：2010-11-28 07:56:50
【问题描述】：

我正在尝试使用 opacity 属性和 jQuery animate 函数在我的水平选项卡菜单上实现类似点击的效果。这是执行此操作的代码：

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

我的问题发生在 Internet Explorer 7 和 6 上。使用不透明度属性制作动画时，我的水平菜单中的选项卡失去了初始位置。

Click here 访问我的网站。要查看问题，请单击“Contato”，然后单击“Início”（抱歉，它是用葡萄牙语编写的，但您应该能够看到错误发生）。注意，到目前为止，我只在 IE7/IE6 中检测到此问题！

提前谢谢你！

【问题讨论】：

标签： jquery internet-explorer css opacity jquery-animate

【解决方案1】：

我相信这只是一个涉及不透明度和 Internet Explorer 的错误，因为 IE 不支持不透明度。来自 jQuery.support.opacity 属性的jQuery documentation：

opacity：如果是浏览器则等于 true 可以正确解释不透明度 style 属性（当前为 false IE，它使用 alpha 过滤器代替）。

为了避免该错误并且仍然对兼容的浏览器产生影响，我将动画代码包装在以下条件中：

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

【讨论】：