Animate opacity doesn't work properly on IE

Question

I\'m trying to use animate() to change the height and opacity of a div. The div has an image background in CSS. It works fine on Firefox and Safari

Answer 1

I´ve had the same problem with the IE 7, the problem was a trailing comma after the opacity property

jQuery(this).animate({opacity:1.00,},800);

It has to be:

jQuery(this).animate({opacity:1.00},800);

Answer 2

Same problem with IE8. Adding "display: inline-block" to .hover2 in fixed the problem.

$(function() {

        $(".hover1").css("opacity","1.0"); // Default set opacity to 1.0

        // On Mouse over
        $(".hover1").hover( 
                            function () {

                                        // SET OPACITY TO 15%
                                        $("span.hover2").stop().animate({opacity: 0.15}, 1200);
                                        },

                                        // ON MOUSE OUT
                            function () {

                                        // SET OPACITY BACK TO 100%
                                        $("span.hover2").stop().animate({opacity: 1.0}, 1200);
                                        }
                         );
                }
     );

Answer 3

You can use fadeTo to accomplish what you want to do:

$('#list_box').fadeTo("slow", 0.33);

fadeIn and fadeOut do transitions from 0 to 100%, but the above will allow you to fade to an arbitrary opacity.

(http://docs.jquery.com/Effects/fadeTo#speedopacitycallback)

Answer 4

I noticed the problem was caused by position:relative of the container. If "switching" to absolute opacity animation will work.

Answer 5

I had the same sort of issue with this:

$('#nav li').hover(function() {
 $(this).stop().animate({opacity: '0.4'}, 'slow');
},
function() {
 $(this).stop().animate({opacity: '1'}, 'slow');
});

I simply added float:left; to the #nav li css and it fixed the issue.

Answer 6

Do you use some pngfix script ? that may be the culprit.