Page in question: http://www.chrishanel.com/CMS

Using jQuery to animate a fadeout. The following works in IE7, but doesn't in IE8:

HTML (extra line breaks added for ease of reading in the quoteie8 div):

<div id="shell">
        <div id="quote">
                <!--[if IE]>
                    <div id="quoteie8" style="align:center;position:relative;opacity:1.00;
text-align:center;height:144px;width:337px;margin:auto;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true,sizingMethod=crop,src=quote-trans.png);">
                    </div>
                    <![endif]-->
                    <![if !IE]>
                    <img src="images/quote-trans.png">
                    <![endif]>

Javascript:

$("div#quoteie8").animate( {opacity:.00}, 500);
$("div#quote").animate( {opacity:.00}, 500, function () { 
        $("div#shell").animate( {height:"444px"}, 1500);

Compatibility view has this working just fine, and I am not finding an answer as to how to make this animate work properly. Thanks.

3 answers

danwellman 5600
1
point

Have you tried it without the AlphaImageLoader filter? The jQuery looks fine tbh and if it's working in IE7 it can't be that causing the problem.

You don't really need to use the filter anyway as IE7 & 8 both support alpha-transparent PNGs. In fact I wouldn't recommend using the filter at all even with IE6 because it's very slow and can cause additonal problems such as links above filtered PNGs not being clickable.

Use DD_BelatedPNG to fix PNGs in IE6

Answered about 7 years ago by danwellman
  • Taking out the AlphaImageLoader causes the animation to work properly, but the Transparency on the PNG no longer works properly. I believe it has to do with being assigned an opacity value that IE doesn't like it. taikomochi about 7 years ago
  • try DD_BelatedPNG, I only ever use it in IE6 but it might help. When you say the transparency no longer works, are the PNGs tansparent? Do they have white or grey colouring where the transparency should be? Instead of using a transparent PNG, have you considered using a solid image and then setting opacity in the CSS? IE can use filter: alpha(opacity = 50); might help... danwellman about 7 years ago
Jensen 1
0
points

Instead of using the jQuery animate(); method, you could simply use it's fadeOut(); method. It has a binding that allows you to set a timer for the fade out speed, and can be activated with an event (click, hover, submit, etc.)

  $("#quoteie8").fadeOut("500");

You can use this to run all of the element's fadeOut property you have in your javascript.

List of Events

List of Effects (including fadeOut)

Answered about 7 years ago by Jensen
Marcel 57
0
points

No, IE7 and IE8 don't support alpha-transparent PNGs! Yes they do if you use it as a static image, but if you ever do some fadeIn / fadeOut on a halftransparent PNG, like for example a shadow, you will get shocked by the Mess Internet Explorer does, and even IE8!

So using the filter on them is not a bad solution. But it seems that the filter don't work in IE8, have you tried to force IE8 acting like IE7, maybe he will understand the filter also then.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Answered about 7 years ago by Marcel