2

Accordion Image Menuに基づいて、jquery イメージ スライダー/Accordion で黒いアウトラインを白いテキストにシミュレートしようとしています 。これは、IE 9 が登場するまでうまく機能します。不透明度を処理するために Jquery fadeTo() を使用しています。もともと私は animate() を使用していましたが、同じ問題があります。テキストがフェード インまたはフェード アウトするたびに、スパン要素があるブラック ボックスが表示されます。ブラック ボックスは、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 に答える