Question

I’m trying to simulate a black outline to white text on a jquery image slider/Accordion based on Accordion Image Menu . This works great until IE 9 comes into the picture. I’m using Jquery fadeTo() to handle opacity. Originally I was using animate() but I have the same trouble with that. Whenever the text fades in or out I’m getting a black box where the span elements are. The black box seems to quickly appear then disappear with a flash type effect when fadeTo() starts and then again when fadeTo() finishes. This does not occur with IE 7 or 8. Looks great there.

In an IE-only stylesheet I have

#acc-menu1 a span.left-arrow{
 position: absolute;
 left: -5px;
 bottom: 0;
 color: #FFF;
 font-size: 3em;
 margin-right: 25px;
}

#acc-menu1 a span{
 font-family: "Helvetica",sans-serif;
 bottom:0;
 left:20px;
 width:100%;
 display:block;
 padding:2px 5px 5px;
 position:absolute;
 font-size:1.8em;
 font-weight: bold;
 height:25px;
 line-height:18px;
 color: #FFF;
 /*filter: progid:DXImageTransform.Microsoft.DropShadow(offX=1,offY=1,color=000000);*/
 filter: progid:DXImageTransform.Microsoft.Shadow(direction=225,strength=2,color=black);
}

HTML looks like this…

 <div id="acc-menu1">
      <a href="#"><span>Link Name</span><img title="title" src="image source" alt="" width="w" height="h" /><span class="left-arrow">&laquo;</span></a>
      ... 3 more anchor tags ...
 </div>

Link Name is what fades in and out depending on which image is open.

Here is the relevant js

 var title = $('span',this);
 var arrow = $('.left-arrow',this);

 if (_this.menuSettings.fadeInTitle != null && title.length > 0) {
                    if (itemDim == _this.menuSettings.openDim) {
                        if (_this.menuSettings.fadeInTitle){
                            title.fadeTo('slow', 1);
                            arrow.fadeTo('fast', 0);

                        }else {
                            title.fadeTo('slow', 0);
                            arrow.fadeTo('fast', 1);

                        }
                    } else {
                        if (_this.menuSettings.fadeInTitle){
                            title.fadeTo('slow', 0);
                            arrow.fadeTo('fast', 1);

                        }else {
                            title.fadeTo('slow', 1);
                            arrow.fadeTo('fast', 0);

                        }
                    }
                }

I’m doing my best here to accommodate IE, but it’s getting frustrating. Any suggestions would be greatly appreciated.

Thanks,

Mark

Answer 1

Since this looks like a conflict with your filter rule, I would suggest trying to neuter that rule during the fade animations. That might solve the problem, but I cannot test it so unfortunately I can offer no guarantee.

You can start by isolating the filter rule in its own class selector:

#acc-menu1 a span {
    font-family: "Helvetica", sans-serif;
    /* [...] */
    color: #FFF;
}

#acc-menu1 a span.shadow {
    filter: progid:DXImageTransform.Microsoft.Shadow(direction=225,strength=2,color=black);
}

Then, you remove the shadow class before fading and reinstate it afterwards. To avoid duplicating a lot of code, you can write your own fadeTo() method:

$.fn.shadowFadeTo = function(duration, opacity, easing, callback) {
    // 'easing' and 'callback' are optional, 'callback' takes precedence.
    if (typeof callback === "undefined") {
        callback = easing;
        easing = "swing";
    }

    return this.removeClass("shadow").fadeTo(duration, opacity, easing, function() {
        $(this).addClass("shadow");
        if ($.isFunction(callback)) {
            callback.apply(this);
        }
    });
};

From there, you only have to write:

if (_this.menuSettings.fadeInTitle){
    title.shadowFadeTo("slow", 1);
    arrow.fadeTo("fast", 0);
} else {
    title.shadowFadeTo("slow", 0);
    arrow.fadeTo("fast", 1);
}