1

这段代码可以满足我的需要，但它在执行此操作时会出现令人讨厌的闪烁。它的作用是在我有一个包含在“大” div（navContainer）中的内联列表的基础上，在大 div 之上是一个较小的 div（smallNavContainer）。当下面的大 div 向左或向右移动时，较小的 div 会显示列表的不同部分。当我使用“margin-left”时，它可以工作，但有一个烦人的闪烁，如果我只使用“left”，则没有闪烁，但是一旦显示的区域在屏幕外，列表的其余部分都不会移动显示在。有什么办法可以摆脱marginLeft的闪烁？或者当我使用“左”时，有没有办法让列表的其余部分呈现。

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/>
4

2 回答 2

0

使用%代替+=或-=可能有帮助但不确定

于 2012-10-03T15:25:34.527 回答
0

我弄清楚了闪烁是什么，当它的边缘与渲染的 div 交叉时，IE 过早地删除了每个按钮。

于 2012-10-09T18:04:41.777 回答