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, but when I test it in IE the background is being removed. This is my code:

if (jQuery.support.opacity) {
    jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
} else {
    jQuery('#list_box').animate({filter: 'alpha(opacity=100)',height: '300px',top: newTop},{duration: 300});
}

How can I fix this problem?

Answer 1

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 2

I found a solution that worked for me: position:inline-block; This works for fading text opacity, I haven't tried it with a CSS background image. Maybe it helps anyway.

I just wanted to report a small bug with fadeTo method in Internet Explorer 8. It won't work if your element as "display" set to "inline". I found that you need to put it to "inline-block" and then it works perfectly. There is nothing about this on the web and it's not the first time I have this problem.

Don't know if it's the right way to report this issue, but i'm sure someone will read this post :)

found at http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm

Answer 3

I solved it with adding an opaque background to the animated element:

CSS:

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 195px;
    height: 274px;
    cursor: pointer;
    background: #fff url('../images/common/image_hover.png') 0 0 no-repeat; /* the solution */
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
    filter: alpha(opacity=0); /* IE6-7 */     
    zoom: 1;
}

JS:

$('.overlay').hover(
    function(){
        $(this).animate({'opacity': 0.7}, 300);
    },
    function(){
        $(this).animate({'opacity': 0}, 250);
    }
);

Works for IE7-8

Hope this will help someone ;)

Answer 4

Ok this might help a little bit, I found a solution in this site about the exact problem http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

in conclusion, the general problem is the opacity filter on IE, in your specific case there is not much you can do, thought

but in case you fade in and out, the prevent the problem with a png background image you just have to remove the filter attribute the jQuery function added whe the fx ends. Just use a callback function, something like that would do it:

$('#node').fadeOut('slow', function() {<br/>
    this.style.removeAttribute('filter');<br/>
});

in case you selectors returns more than one, use the each function, something like this:

$('.nodes').fadeIn('fast',
    function() {
        $(this).each (
            function(idx,el) {
                el.style.removeAttribute('filter');
             }
        );
     }
);

Answer 5

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 6

Very (very) late with the answer, but as this is at the top of Google when I looked for help with a jquery v animate issue in IE8 I thought i'd post it here.

My problem was connected to the hasLayout bug in IE, and adding "display: inline-block" to the element to be faded fixed the problem.