我正在淡入淡出一些列表项以使用以下代码创建新闻自动收报机。
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转换期间才能正常工作。转换解决后,列表项将返回正确的z-index,直到下一个fadeIn fadeOut开始。
我已经检查了导航全部设置为z-index 9999的z-index,它在屏幕上没有任何问题。
关于如何将这些列表项目在转换时保留在导航后面的任何想法?
非常感谢
更新:这是一个jsFiddle http://jsfiddle.net/leanda/eetyv/
答案 0 :(得分: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;
}