1
这段代码做了我所需要的，但它有一个恼人的闪烁，因为它正在做它。它所做的是在底部我有一个“大”div（navContainer）中包含的内联列表，并在大div的顶部是一个较小的div（smallNavContainer）。当下面的大div被向左或向右移动时，较小的div显示列表的不同部分。当我使用“margin-left”时，它可以工作，但有一个令人讨厌的闪烁，如果我只使用“left”，没有闪烁但div一旦显示的区域离屏，列表的其余部分无法移动在显示中。有没有办法摆脱marginLeft的闪烁？或者当我使用“左”时，是否有办法让列表的其余部分呈现。jQuery - 动画闪烁？ （IE8）
jQuery的
$('#capeBtnsPrevTab').live("click",function()
{
$("#navContainer").animate({"margin-left": "+=468"}, 1000, function(){
});
});
$('#capeBtnsNextTab').live("click",function()
{
$("#navContainer").animate({"margin-left": "-=468"}, 1000, function(){
});
});
CSS
.floatIt
{
float:left;
}
div#smallNavContainer
{
left: 50%;
position: absolute;
z-index:0;
overflow:hidden;
width: 780px;
height: 88px;
margin-left:-392px;
margin-top: 72px;
}
#navContainer
{
position: relative;
margin-left:-506px;
margin-top:0px;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 0px;
padding-left: 0px;
margin-right: -2px;
margin-left: -2px;
}
HTML
<img class="floatIt" id="capeBtnsPrevTab" src="btn_1.png" alt="Previous"/></a>
<div class="floatIt" id="smallNavContainer">
<div id="navContainer">
<ul id="navlist">
<li><img id="btn9" src="menu_one.jpg"/></li>
<li><img id="btn10" src="menu_two.jpg"/></li>
<li><img id="btn11" src="menu_three.jpg"/></li>
<li><img id="btn1" src="menu_four.jpg"/></li>
<li><img id="btn2" src="menu_five.jpg"/></li>
<li><img id="btn3" src="menu_six.jpg"/></li>
<li><img id="btn4" src="menu_seven.jpg"/></li>
<li><img id="btn5" src="menu_eight.jpg"/></li>
<li><img id="btn6" src="menu_nine.jpg"/></li>
<li><img id="btn7" src="menu_ten.jpg"/></li>
<li><img id="btn8" src="menu_eleven.jpg"/></li>
</ul>
</div>
</div>
<a><img class="floatIt" id="capeBtnsNextTab" src="UI/btnNext_n.png" alt="Next"/></a><br/>