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...
精彩评论