2

我正在尝试在基于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，但它变得令人沮丧。任何建议将不胜感激。

谢谢，

标记

4

1 回答 1

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);
}
于 2012-11-23T19:41:20.163 回答