1

This code does what I need it to but it has an annoying flicker as it's doing it. What it does is at the base I have an inline list contained in a "large" div (navContainer) and on top of the large div is a smaller div (smallNavContainer). As the large div below is moved left or right the the smaller div displays a different part of the list. When I'm using "margin-left" it works but there is an annoying flicker and if I use just "left" there is no flicker but div once the area that was displayed is offscreen none of the rest of the list that is moving in is displayed. Is there any way to get rid of the flicker from marginLeft? or is there a way to make the rest of the list render when I use "left".

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 に答える