CODEWITHSUNDEEP
javascriptjqueryinternet-exploreranimation
fidoboy
fidoboy

Reputation: 1059

Animate opacity doesn't work properly on IE

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?

Upvotes: 31

Views: 64313

Answers (14)

y0ux
y0ux

Reputation: 11

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');
             }
        );
     }
);

Upvotes: 1

Kate
Kate

Reputation: 21

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 ;)

Upvotes: 2

Davide De Maestri
Davide De Maestri

Reputation: 496

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

Upvotes: 3

Sidd
Sidd

Reputation: 13

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);
                                        }
                         );
                }
     );

Upvotes: 1

xon1c
xon1c

Reputation: 423

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

Upvotes: 2

jenses
jenses

Reputation: 21

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);

Upvotes: 2

Hoxxy
Hoxxy

Reputation: 41

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.

Upvotes: 4

katebp
katebp

Reputation: 112

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.

Upvotes: 5

newfront
newfront

Reputation: 137

In jQuery, once the div is set to have either opacity:0 (in Standards Compliant Browsers) or filter:alpha(opacity=0) in IE, you can just use 

$('#div').animate({opacity:1},100);
Since jQuery supports cross-browser support, if you end up animating the filter via IE, then chances are jQuery is trying to support IE and the conflict comes when jQuery fires the opacity change x2.

I hope this helps. I have had the same issue, plus odd issues with IE not being able to handle fading on a div stack with multiple items in it.

Upvotes: 3

user242190
user242190

Reputation:

I've been having the same problem. I stumbled into the answer, when I set the opacity to 40%:

$('#list_box').stop().animate({opacity: '.4'},"slow");

I noticed that made the opacity jump to 100%, then animate down to 40%. Eureka.

So, now I explicitly set the opacity to zero before the animation:

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow");

That animates smoothly, except the text still looks horrible in IE.

To clean up the text, I removed the opacity from the css in IE after the animation. This seems to clear up the text quite a bit in IE6 and IE8.

$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow",function(){
    //remove the opacity in IE
    jQuery.each(jQuery.browser, function(i) {
        if($.browser.msie){
            $('#list_box').css({opacity:''});
        }
    });
});

I'm testing it on a Mac in Parallels, in IE6 and IE8. Everything seems to work fine on the Mac side.

Upvotes: 5

Doug Neiner
Doug Neiner

Reputation: 66191

You do not need to write a special handler for IE, jQuery does it all for you behind the scenes:

jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop}, 300);

HOWEVER: If you have a 24-bit transparent PNG as your background image that is disappearing, you need to be aware that you cannot combine filter: alpha (which jQuery correctly uses behind the scenes in IE) with a 24-bit transparent PNG in IE7 or IE8. I believe the only way around it is to set a background color (other than transparent) on the object on which you are using filter: alpha

How to test: Simply set a background color on #list_box to a solid color by adding something like this to your CSS after your background-image declaration:

#list_box { background-color: red }

If the background image remains, and your #list_box animates correctly (except for the hideous background) you know what the problem is and will have to find another way to accomplish what you want.

Upvotes: 16

Andy Mikula
Andy Mikula

Reputation: 16780

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)

Upvotes: 1

Olivvv
Olivvv

Reputation: 1200

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

Upvotes: 0

Eric
Eric

Reputation: 97571

I was under the impression that jQuery did the whole opacity support thing for you. Does this work for all browsers?

$('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});

Upvotes: 17

Related Questions