Question

我知道这个问题已被问到，但答案总是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>

文本在I.E中保持不可见alpha（opacity = 0），适用于chrome和firefox 可以在sample domain查看。

修改我试过引用和取消引用不透明度：'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（）函数有关？

Answer 1

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

<style>
    .entry {
    }
</style>

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

Answer 2

不确定这是否适用于较旧的IE版本，但它在IE9上以IE 7模式运行...

过滤器：对于IE，alpha（opacity =＃）为0-100，因此将其设置为1可能只是将其设置为... 1，当你想要它为100时。

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

jquery animate opacity不能跨浏览器工作

2 个答案: