Question

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

Answer 1

I figured out what the flickering was, it was IE prematurely removing each button when the edge of it crossed off of the rendered div.