jquery动画不透明度不能跨浏览器工作答案

【问题标题】：jquery animate opacity not working cross browserjquery动画不透明度不能跨浏览器工作
【发布时间】：2011-09-12 16:24:18
【问题描述】：

我知道有人问过这个问题，但答案总是 animate() 处理 opacity:0 和 filter:alpha(opacity=0) 之间的跨浏览器差异，在这种情况下不是这样......

我有这个 div

.entry
{
opacity:0.4;
filter:alpha(opacity=0);
}

还有这个 jquery

<script>
$(document).ready(function(){
    setTimeout(function(){
    $('.entry').animate({opacity:'1'},700);
    },1000);
});
</script>

文本在 IE 中保持不可见 alpha(opacity=0)，适用于 chrome 和 firefox 可以在sample domain查看。

编辑我试过引用和取消引用 opacity:'1' 没有帮助

fadeIn() 不是一个选项，因为我需要保持 div 相同的高度，而且我不能过多地更改 CSS 以保持相同的高度，因为它会弄乱我的手风琴菜单。

感谢这是最终在 x 浏览器上工作的原因

<script>
$(document).ready(function(){
    $('.entry').css({'opacity':0, 'filter':'alpha(opacity=0)'});
    setTimeout(function(){
    $('.entry').animate({opacity:'1'},700);
    },1000);
});
</script>

不知道为什么必须像这样在'opacity':0, 'filter':'alpha(opacity=0)' 周围使用引号，但这是唯一可行的方法。

我还必须将它放在我对 id# 元素具有不同的 jquery 高亮效果之后。当它被放在我的标题中的那个函数之前时，它阻止了那个函数工作。也许与 css() 函数有关？

【问题讨论】：

你能用$('.entry').fadeIn(700);试试吗？
取消引用“1”。这可能是罪魁祸首。
不是用 CSS 设置 .entry 的初始不透明度，而是让 jQuery 来处理。正确使用 jQuery 可以很好地解决不透明度问题。
我已经尝试引用和取消引用 opacity:'1' 没有帮助，fadeIn() 不是一个选项，因为我需要保持 div 相同的高度，并且我不能过多地更改 CSS 以保持高度相同，因为它弄乱了我的手风琴菜单。
我知道这不是你要问的（我讨厌人们提出超出问题范围的建议）但是......这是一个很好的不透明的旧 PNG 可以解决的问题吗？

标签： jquery internet-explorer cross-browser opacity

【解决方案1】：

不确定这是否适用于旧版 IE，但它适用于 IE9 上的 IE 7 模式...

Filter:alpha(opacity=#) 对于 IE 来说是 0-100，所以当你想要它为 100 时，将其设置为 1 可能只是将其设置为 ... 1。

我刚刚尝试制作这个 jsFiddle：http://jsfiddle.net/N6GBU/1/，并且 div 文本淡入（无论如何在 IE9 上）...我只是在动画中添加了过滤器。我不确定这是否是你所追求的……

【讨论】：

【解决方案2】：

为了代码一致性和消除跨浏览器问题，还可以使用 jQuery 而不是 CSS 设置初始不透明度...

<style>
    .entry {
    }
</style>

<script>
$(document).ready(function(){
    $('.entry').css({opacity: 0.4});
    setTimeout(function(){
    $('.entry').animate({opacity: 1},700);
    },1000);
});
</script>

【讨论】：