jQuery opacity problem in ie

Question

I am getting this wired aliased text and image borders in IE only which you can see in image.

enter image description here

As you can see in javascript i am using jQuery and css(opacity).

This is my html:

<div id="banner-container">
    <div id="banner-0" class="banner">
        <div class="banner-text">
            <div class="banner-text-heading-3">0 Lorem ipsum dolor si</div>
            <div class="banner-text-text-3">0 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <br /><b>Learn more</b></div>
        </div>
        <div class="banner-image"><img src="images/banner-img.png" border="0" /></div>
    </div>
    <div id="banner-1" class="banner">
        <div class="banner-text">
            <div class="banner-text-heading-3">1 Lorem ipsum dolor si</div>
            <div class="banner-text-text-3">1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <br /><b>Learn more</b></div>
        </div>
        <div class="banner-image"><img src="images/banner-img1.png" border="0" /></div>
    </div>
    <div id="banner-2" class="banner">
        <div class="banner-text">
            <div class="banner-text-heading-3">2 Lorem ipsum dolor si</div>
            <div class="banner-text-text-3">2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <br /><b>Learn more</b></div>
        </div>
        <div class="banner-image"><img src="images/banner-img2.png" border="0" /></div>
    </div>   
</div>

jQuery code:


$(document).ready(function(){
    slide_logic(0,3,0);
});
function slide_logic(slide,nof_slides,animation_duration)
{
    for(i=0;i<nof_slides;i++)
    {
        if(i==slide)
        {
            $('#banner-'+i).animate({'opacity':'1'},animation_duration);
            $('#banner-'+i+' .banner-text').animate({'opacity':'1'},animation_duration);
        }
        else
        {
            $('#banner-'+i).animate({'opacity':'0'},animation_duration);
            $('#banner-'+i+' .banner-text').animate({'opacity':'0'},animation_duration);
        }
    }
}

Is there any fix for that?

Support for opacity in IE8 and earlier is very poor. There's no getting away from this fact; it is buggy and badly implemented. JQuery might make it easier to use, but it can't fix the bugs. — Spudley, Jul 25 '11 at 10:57
I've had this issue before - do you have any background color set for IE? — SolMan, Jul 25 '11 at 10:43

score 2 · Accepted Answer · edited May 23 '17 at 12:26

2

Look at the answers here: jQuery fadeIn leaves text not anti-aliased in IE7

May be it will help. Appears that it may be bug of IE (as usual)

edited May 23 '17 at 12:26

Community

1
1

answered Jul 25 '11 at 10:45

Sergey

19,487
13
44
68

+1, Thanks for your response. I have added following code in callback of animate if($.browser.msie) this.style.removeAttribute('filter'); it fixes the issue when not animating but same issue when animating. – Imran Naqvi Jul 25 '11 at 11:22

jQuery opacity problem in ie

1 Answers1