开发者

jquery animate opacity not working cross browser

开发者 https://www.devze.com 2023-03-12 06:15 出处:网络
I know this question has been asked but the answer is always that animate() handles cross browser differences between opacity:0 and filter:alpha(opacity=0)not so in this case...

I know this question has been asked but the answer is always that animate() handles cross browser differences between opacity:0 and filter:alpha(opacity=0) not so in this case...

I have this div

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

and this jquery

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

the text remains invisible alpha(opacity=0) in I.E, works in chrome and firefox can view at sample domain.

edit I have tried quoting and unquoting opacity:'1' does not help

fadeIn() not an option because i need to keep the div the same height and I can not change the CSS too much to keep the same height because it messes up my accordion menu.

thanks this is what ended up working x browser

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

not sure why you have to use quotes around 'opacity':0, 'filter':'alpha(opacity=0)' like this but that's the only way it worked.

also I had to put it after a different jquery highlight effect i had on an id# element. when it was placed before that function in my header it k开发者_高级运维ept that one from working. maybe something to do with the css() function?


For code consistency and elimination of cross-browser issues, also set your initial opacity with jQuery instead of CSS...

<style>
    .entry {
    }
</style>

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


Not sure if this is going to work in older IE versions, but it works in IE 7 mode on IE9...

Filter:alpha(opacity=#) is 0-100 for IE, so setting it to 1 may just be setting it to ... 1, when you want it as 100.

I just tried making this jsFiddle: http://jsfiddle.net/N6GBU/1/, and the div text fades in (on IE9 anyway)... I just added filter to the animate. I'm not sure if this is what you were after exactly though...

0

精彩评论

暂无评论...
验证码 换一张
取 消