0

次のコードを使用して、いくつかのリスト項目をフェード インおよびフェード アウトして、ニュース ティッカーを作成しています。

jQuery:

$(function () {
var list_slideshow = $("#ticker"),
    listItems = list_slideshow.children('li'),
    listLen = listItems.length,
    i = 0,
    changeList = function () {

        listItems.eq(i).fadeOut(600, function () {
            i += 1;
            if (i === listLen) {
                i = 0;
            }
            listItems.eq(i).fadeIn(600);
        });
    };
listItems.not(':first').hide();
setInterval(changeList, 8000);
});

CSS:

.ticker-wrap {
 background-color: #ccc;
 }

 ul#ticker {
font-size: 1.2em;
padding: .43em;
 }

 ul#ticker li {
color: #fff;
 }

その上にドロップダウンメニューを開き、現在のliリスト項目がメニューの上に表示されるまで（ULの背景ではなく）、fadeInのfadeOut遷移中にのみ、すべてうまく機能しています。トランジションが解決されると、リスト項目は、次のfadeIn フェードアウトが開始されるまで、正しい z-index に戻ります。

ナビゲーションの z-index がすべて z-index 9999 に設定されていることを確認しましたが、画面上の他の部分に問題はありません。

これらのリスト項目が移行中にナビゲーションの背後に留まる方法についてのアイデアはありますか?

どうもありがとう

更新:ここに jsFiddle がありますhttp://jsfiddle.net/leanda/eetyv/

4

1 に答える 1

0

私は解決策を投稿します：

CSS

.ticker-wrap {
    background-color: #ccc;
    position:relative;
    z-index : 1;
}

.nav-wrap{
    z-index : 2;
}

ul#ticker {
    font-size: 1.2em;
    padding: .43em;
}

ul#ticker li {
    color: #fff;
}
于 2013-09-28T17:36:37.230 に答える