jQuery fadeTo() 在 IE 9 中使用阴影过滤器创建黑框

Question

我正在尝试在基于 Accordion Image Menu 的 jquery 图像滑块/手风琴上模拟黑色轮廓到白色文本。在 IE 9 出现之前，这非常有效。我正在使用 Jquery fadeTo() 来处理不透明度。最初我使用的是 animate() 但我遇到了同样的麻烦。每当文本淡入或淡出时，我都会在 span 元素所在的位置出现一个黑框。当fadeTo() 开始时，黑框似乎很快出现，然后以闪光类型的效果消失，然后在fadeTo() 结束时再次消失。 IE 7 或 8 不会出现这种情况。在那里看起来很棒。

在我只有 IE 的样式表中

#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 看起来像这样...

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

链接名称根据打开的图像淡入和淡出。

这里是相关的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);

                        }
                    }
                }

我正在尽我所能来适应 IE，但它变得令人沮丧。任何建议将不胜感激。

谢谢，

标记

Answer 1

由于这看起来与您的 filter 规则有冲突，我建议在淡入淡出动画期间尝试中性化该规则。这可能会解决问题，但我无法对其进行测试，所以很遗憾我无法提供任何保证。

您可以首先在其自己的类选择器中隔离filter 规则：

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

然后，在褪色之前删除 shadow 类，然后再将其恢复。为避免重复大量代码，可以自己编写fadeTo()方法：

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

从那里，你只需要写：

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