...

View Full Version : jquery: IE doesnt fade in with animate()



lauthiamkok
12-13-2009, 03:19 AM
Hi,
Does anyone know why IE does not fade in the image with animate() like firefox does?

here is my jquery code,


$(document).ready(function(){

$("#supersize").css({
opacity: '.0',
filter: 'alpha(opacity=0)'
});

$("#supersize").animate({
opacity: '1.0',
filter: 'alpha(opacity=100)'
}, 1500);

});


html,


<div id="supersize">
<ul>
<li class="active" href="#"><img src="img_content/large/bg_01.jpg" alt="background"/></li>
</ul>
</div>

Here is the link to see the page,
http://lauthiamkok.net/tmp/jquery/animate/

Many thanks if you have any idea...

Cheers,
Lau

Iszak
12-13-2009, 03:03 PM
You're best of using something like;


$(function(){
$('#supersize').hide().fadeIn(1500);
});

Also I do believe when using "opacity" jQuery will convert it to the most appropriate property for each browser so you don't need to specify filter. You can also specify floats and decimals without the need of quotes. Finally you may want to use chaining for improved performance like I demonstrated.

This should work using your code;


$(document).ready(function(){
$('#supersize').css('opacity', 0).animate({
opacity: 1
}, 1500);
});


Or a more expanded version for readability purposes.


$(document).ready(function(){
$('#supersize').css('opacity', 0);

$('#supersize').animate({
opacity: 1
}, 1500);
});

lauthiamkok
12-13-2009, 04:00 PM
You're best of using something like;


$(function(){
$('#supersize').hide().fadeIn(1500);
});

Also I do believe when using "opacity" jQuery will convert it to the most appropriate property for each browser so you don't need to specify filter. You can also specify floats and decimals without the need of quotes. Finally you may want to use chaining for improved performance like I demonstrated.

This should work using your code;


$(document).ready(function(){
$('#supersize').css('opacity', 0).animate({
opacity: 1
}, 1500);
});


Or a more expanded version for readability purposes.


$(document).ready(function(){
$('#supersize').css('opacity', 0);

$('#supersize').animate({
opacity: 1
}, 1500);
});


thank you so much for this. now I know why it didnt work! thanks! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum