Question

我正在尝试基于Accordion Image Menu在jquery图像滑块/ Accordion上模拟黑色轮廓到白色文本。这很有效，直到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);
}

jQuery fadeTo（）使用阴影过滤器在IE 9中创建黑盒子

1 个答案: